ericasun的Hexo博客

Posted on Edited on In Views:

new 做了什么

1、创建临时对象/新对象
2、绑定原型
3、指定 this = 临时对象
4、执行构造函数
5、返回临时对象

想象我们在制作一个足球游戏，玩家可以创造球员。

我们着重来研究一下这个游戏里面的「制造球员」环节。

一个球员的在计算机里就是一堆属性
位置、弹跳、速度、 生命值 奔跑(动作)、传球(动作)、突破(动作)、铲球(动作)、射门(动作)

我们只需要这样就可以制造一个球员：

1
2
3
4
5
6
7
8
9
10
11
12
var 球员 = {
  ID: 1, // 用于区分每个球员
  生命值：52，
  位置:"前锋",
  弹跳:60,
  速度:82, 
  奔跑:function(){ /*狂奔的代码*/  },
  传球:function(){ /*传球的代码*/  },
  突破:function(){ /*突破的代码*/  },
  铲球:function(){ /*铲球的代码*/  },
  射门:function(){ /*射门的代码*/ }
}

俱乐部.制造(球员)
制造二十个球员

如果需要制造 100 个球员怎么办呢？

循环 100 次吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 球员们 = []
var 球员
for(var i=0; i<100; i++){
	球员 = {
	  ID: i, //  ID 不能重复
	  生命值：52，
	  位置:"前锋",
	  弹跳:60,
	  速度:82, 
	  奔跑:function(){ /*狂奔的代码*/  },
	  传球:function(){ /*传球的代码*/  },
	  突破:function(){ /*突破的代码*/  },
	  铲球:function(){ /*铲球的代码*/  },
	  射门:function(){ /*射门的代码*/ }
	}
  球员们.push(球员)
}
俱乐部.批量制造(球员们)

质疑

上面的代码存在一个问题：浪费了很多内存。

奔跑、传球、突破、铲球、射门这五个动作对于每个球员其实是一样的，只需要各自引用同一个函数就可以了，没必要重复创建 100 个行走、100个奔跑……
只有 ID、生命值、弹跳、速度、位置需要创建 100 次，因为每个球员有自己的 ID、生命值、弹跳、速度、位置。

改进

用原型链可以解决重复创建的问题：我们先创建一个「球员原型」，然后让「球员」的 proto 指向「球员原型」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var 球员原型 = {
	  奔跑:function(){ /*狂奔的代码*/  },
	  传球:function(){ /*传球的代码*/  },
	  突破:function(){ /*突破的代码*/  },
	  铲球:function(){ /*铲球的代码*/  },
	  射门:function(){ /*射门的代码*/ }
}
var 球员们 = []
var 球员
for(var i=0; i<100; i++){
  球员 = {
      ID: i, //  ID 不能重复
	  生命值：52，
	  位置:"前锋",
	  弹跳:60,
	  速度:82, 
  }
  球员.__proto__ = 球员原型 
  球员们.push(球员)
}

俱乐部.批量制造(球员们)

优雅？

有人指出创建一个球员的代码分散在两个地方很不优雅，于是我们用一个函数把这两部分联系起来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function 球员(ID){
  var 临时对象 = {}

  临时对象.__proto__ = 球员.原型

  临时对象.ID = ID
  临时对象.生命值 = 42
  临时对象.位置 = '前锋'
  临时对象.弹跳 = 60
  临时对象.速度 = 90
  
  return 临时对象
}

球员.原型 = {
	奔跑:function(){ /*狂奔的代码*/  },
	传球:function(){ /*传球的代码*/  },
	突破:function(){ /*突破的代码*/  },
	铲球:function(){ /*铲球的代码*/  },
	射门:function(){ /*射门的代码*/ }
}

然后就可以愉快地引用「球员」来创建球员了：

1
2
3
4
5
6
var 球员们 = []
for(var i=0; i<100; i++){
  球员们.push(球员(i))
}

俱乐部.批量制造(球员们)

用 new 关键字，可以让我们少写几行代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function 球员(ID){
  var 临时对象 = {}  // 1、我帮你创建临时对象

  临时对象.__proto__ = 球员.原型  // 2、我帮你绑定原型

  临时对象.ID = ID
  临时对象.生命值 = 42
  临时对象.位置 = '前锋'
  临时对象.弹跳 = 60
  临时对象.速度 = 90
  
  return 临时对象 // 3、我帮你return
}

// 4、统一叫做prototype
球员.原型 = {  
	奔跑:function(){ /*狂奔的代码*/  },
	传球:function(){ /*传球的代码*/  },
	突破:function(){ /*突破的代码*/  },
	铲球:function(){ /*铲球的代码*/  },
	射门:function(){ /*射门的代码*/ }
}

只要你在球员前面使用 new 关键字，那么可以少做四件事情：
1、不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
2、不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
3、不用 return 临时对象，因为 new 会帮你做；
4、不要给原型想名字了，因为 new 指定名字为 prototype。

这一次我们用 new 来写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function 球员(ID){
  this.生命值 = 42
  this.ID = ID
  this.生命值 = 42
  this.位置 = "前锋"
  this.弹跳 = 60
  this.速度 = 82 
}

球员.prototype = {
	奔跑:function(){ /*狂奔的代码*/  },
	传球:function(){ /*传球的代码*/  },
	突破:function(){ /*突破的代码*/  },
	铲球:function(){ /*铲球的代码*/  },
	射门:function(){ /*射门的代码*/ }
}

然后是创建球员（加了一个 new 关键字）：

1
2
3
4
5
6
var 球员们 = []
for(var i=0; i<100; i++){
  球员们.push(new 球员(i))
}

俱乐部.批量制造(球员们)

new 的作用，就是省那么几行代码。（也就是所谓的语法糖）

注意 constructor 属性
new 操作为了记录「临时对象是由哪个函数创建的」，所以预先给「球员.prototype」加了一个 constructor 属性：

1
2
3
球员.prototype = {
  constructor: 球员
}

如果你重新对「球员.prototype」赋值，那么这个 constructor 属性就没了，所以你应该这么写：

1
2
3
4
5
球员.prototype.奔跑 = function(){ /*狂奔的代码*/  }
球员.prototype.传球 = function(){  /*传球的代码*/ }
球员.prototype.突破 = function(){  /*突破的代码*/  }
球员.prototype.铲球 = function(){  /*铲球的代码*/  }
球员.prototype.射门 = function(){  /*射门的代码*/  }

或者你也可以自己给 constructor 重新赋值：

1
2
3
4
5
6
7
8
球员.prototype = {
  constructor: 球员,
  奔跑:function(){ /*狂奔的代码*/  },
  传球:function(){ /*传球的代码*/ },
  突破:function(){ /*突破的代码*/  },
  铲球:function(){ /*铲球的代码*/  },
  射门:function(){ /*射门的代码*/  }
}

Posted on Edited on In Views:

一、申请GitHub应用

1. 注册一个新应用 new OAuth application

注册new OAuth application网址,这三项内容必须填写

1
2
3
Application name：// 这个随意填写
Homepage URL：// 你的网站的URL地址，包含http部分。
Authorization callback URL：// 你的网站的URL地址，包含http部分，和上面的 Homepage URL 一致就行

1.1 Homepage URL与Authorization callback URL的填写

  • 如果你的网站是host在github上的，是通过github分配给你的网址进行访问的，直接填写github分配给你的网站就可以，类似 username.github.io
  • 如果你有自己的域名，但网站内容host是在github上的，是通过cname的方式访问的，那么这两项都填你的域名
  • 如果你有自己的域名，也有自己的站点，那么这两项都填你的域名
  • 在调试阶段，可以把这两项设置为你的本地地址，这样方便测试，而不用一次又一次的部署网站，等测试好之后再统一部署。

2. 生成Client信息

点击 “register application”完成注册，系统会生成Client ID和Client secrets(需要手动点一下旁边的按钮)

二、配置Gitalk

方法1：通过Next主题进行配置

Next主题已经为我们配置了gitalk，只需配置即可

打开当前主题下的配置文件_config.yml

路径 \themes\hexo-theme-next-master\_config.yml,打开这个文件并找到下面这段代码

1
2
3
4
5
6
7
8
9
10
gitalk:
  enable: true
  github_id: 你的Github登录账号    // 这里可以不要加引号
  repo: gitalk 你的 Github仓库的名称   // 不要写成仓库地址
  client_id: 上面刚刚申请的 Client ID  
  client_secret: 上面刚刚申请的 Client Secret
  admin_user: 你的Github登录账号
  distraction_free_mode: false
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
  language:

方法2：使用官网配置

官网地址：https://github.com/gitalk/gitalk

1
2
3
4
5
6
7
8
9
10
11
const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',      // The repository of store comments,
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

三、参数说明

注：官网配置的参数和Hexo主题Next的参数是通用的

  • repo: 要求填写你的Github仓库的名称，这个仓库可以是你的github上的任意一个，但必须是公开的。评论内容会以 issue的形式保存到仓库的issues中，所以建议为评论单独新建一个仓库

  • admin: 指定了可以初始化文章评论的github用户，一般只填写你自己就可以了

  • id: 文章的URL路径，不包括域名，这个路径要求必须是唯一的，且不能超过50个字符(如果超过了，可以使用md5等工具对路径进行摘要缩短长度即可)。每一遍文章的评论和这个路径相关联，所以即使域名不同，只要文章的URL一样，就会显示相关联的评论。
    在Next主题中是自动配置的Hexo主题Next的参数定义在layout/_third-party/comments/gitalk.njk中

  • distractionFreeMode：是否是聚精会神模式，即评论框在写评论的时候，周围是否变成黑

四、遇到的问题

  • 问题1：Error: Not Found
    解决方法：一般是仓库名称没有正确设置，请依据上面的参数说明部分进行设置

  • 问题2：Related Issues not found： 未找到相关的issue进行评论
    解决方法：出现这种情况是因为文章评论还未初始化，只需要点击下面的按钮，登录 GitHub 账户即可

  • 问题3：评论区一直加载不上：配置中的proxy地址不正确或已经失效。
    解决方法：官网默认地址是 https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token。 如果你使用的是Next主题，请确保也是这个地址

  • 问题4：设置后报错Error: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
    解决方法：配置文件_config.yml中gitalk相关配置有问题

  • 问题5：评论区点击使用Github登陆报错404
    解决方法：配置文件_config.yml中gitalk相关配置有问题

Posted on Edited on In Views:

方法1：自定义 Vite 插件

原版本升级到Vite2之后会报错plugin.configureServer is not a function ，此插件为修改后版本，亲测有效

1、在项目根目录创建 md.ts 文件，填充如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import path from 'path'
import fs from 'fs'
import marked from 'marked'

const mdToJs = str => {
  const content = JSON.stringify(marked(str))
  return `export default ${content}`
}

export function md() {
  return {
    name: 'md', 
    configureServer(){ // 用于开发
      async ({ app }) => {
        app.use(async (ctx, next) => { // koa
          if (ctx.path.endsWith('.md')) {
            ctx.type = 'js'
            const filePath = path.join(process.cwd(), ctx.path)
            ctx.body = mdToJs(fs.readFileSync(filePath).toString())
          } else {
            await next()
          }
        })
      }
    },
    transform(code, id){ // 用于 rollup // 插件
      // 获取文件后缀名
      const fileArr = id.split('.') //根据.分割数组
      const fileType = fileArr[fileArr.length -1]; //取最后一个

      if(/\md$/.test(fileType)){
         return mdToJs(code)
      }
      return
    }
  }
}

2、接着修改 vite.config.ts，引入上面创建的插件

1
2
3
4
5
import {md} from './md';

export default {
  plugins: [md()]
};

3、在使用时，会将导入的 md 文件转换成 js 文件渲染。具体使用示例：

1
2
3
4
5
6
7
8
9
10
11
<template>
	<article v-html="md" />
</template>

<script lang="ts">
import md from './xxx.md'
export default {
setup(){
  return {md}
  }
}

方法2：使用 vite-plugin-markdown

这款第三方插件不仅支持引入并渲染 Markdown 文件，并且支持渲染成各种格式，例入 HTML 字符串、React 或 Vue 的组件等。

1、安装 vite-plugin-markdown

1
npm i vite-plugin-markdown

或

1
yarn add vite-plugin-markdown

2、在 vite.config.ts 中修改：

1
2
3
4
5
6
7
8
9
const mdPlugin = require('vite-plugin-markdown')

export default {
  plugins: [
    mdPlugin.plugin({
      mode: ['html'],
    })
  ]
}

3、配置中传入一个 options，选项对象，支持以下参数：

1
2
3
mode?: ('html' | 'toc' | 'react' | 'vue')[]
markdown?: (body: string) => string
markdownIt?: MarkdownIt | MarkdownIt.Options

4、各个模式下的渲染示例：

4.1 Import Front Matter attributes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: Awesome Title
description: Describe this awesome content
tags:
  - "great"
  - "awesome"
  - "rad"
---
# This is awesome
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

import { attributes } from './contents/the-doc.md';

console.log(attributes) //=> { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }

4.2 Import compiled HTML (Mode.HTML)

1
2
3
4
import { html } from './contents/the-doc.md';

console.log(html) 
//=> "This is awesomeite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production."

4.3 Import ToC metadata (Mode.TOC)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# vite

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

## Status

## Getting Started

# Notes

import { toc } from './contents/the-doc.md'

console.log(toc)
//=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]

4.4 Import as a React component (Mode.REACT)

1
2
3
4
5
6
7
8
9
10
import React from 'react'
import { ReactComponent } from './contents/the-doc.md'

function MyReactApp() {
  return (
      <div>
          <ReactComponent />
      </div>
	)
}

4.5 Import as a Vue component (Mode.VUE)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <article>
    <markdown-content />
  </article>
</template>

<script>
import { VueComponent } from './contents/the-doc.md'

export default {
  components: {
    MarkdownContent: VueComponent
  }
};
</script>

Posted on Edited on In Views:

一、更改主题颜色方案

1、打开主题下的配置文件_config.yml

路径 \themes\hexo-theme-next-master\_config.yml,打开这个文件并找到Schemes这段代码

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2、打开想要选择的颜色方案

可以看到一共四个主题，这里选择的是Gemini颜色方案，把这一行前面的”#”去掉即可，重新运行后就会显示Gemini的颜色方案

二、在导航栏中添加主页

安装主题后，发现导航栏没有主页

1、在当前主题下的配置文件_config.yml中找到menu这段代码，把home这一行的“#”去掉即可

1
2
menu:
  home: / || fa fa-home

重新运行后导航栏会显示主页

三、配置分类

1、在当前主题下的配置文件_config.yml中找到menu这段代码 ，把categories这一行的“#”去掉

1
2
menu:
  categories: /categories/ || fa fa-th

2、创建分类目录文件

因为分类页是没有默认页面的所以需要我们手动创建分类页。

打开命令行，进入博客项目所在的文件夹下，执行以下命令

1
hexo new page categories

成功后会提示：

INFO Created: ~/blog/source/categories/index.md

这样我们就创建好了分类页面了。

但是这时主题还能将页面识别为分类页；所以我们需要编辑这个新建的页面，让主题识别页面，并自动为这个页面显示分类。

3、编辑页面让主题识别页面为分类页面

根据成功后提示路径打开index.md这个页面文件，打开后默认内容是

1
2
3
4
---
title: 文章分类
date: 2018-03-25 12:35:35
---

添加上type: "categories"这段代码

1
2
3
4
5
---
title: 文章分类
date: 2018-03-25 12:35:35
type: "categories"
---

这样就完成了分类页面的配置了

4. 给文章设置分类属性

打开需要添加分类的文章，在文章Front-matter区域，也就是顶部两个---中，添加categories设置分类

注：“-”后面有个空格

4.1 设置一级分类

1
2
3
4
5
6
---
title: 如何更换Hexo主题
date: 2017-10-19 22:26:23
categories: 
- Hexo
---

如categories:Hexo表示添加该文章到 “Hexo” 这个分类下。

然后我们就可以在博客到分类里看到该分类了。

4.2 设置二级分类

1
2
3
4
5
6
7
---
title: 如何更换Hexo主题
date: 2017-10-19 22:26:23
categories: 
- Blog
- Hexo
---

如上设置二级分类，表示该篇文章为 Blog 分类下的 Hexo 分类下。

4.3 并列+子分类

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

1
2
3
4
5
6
7
8
---
title: 如何更换Hexo主题
date: 2017-10-19 22:26:23
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]
---

四、配置标签

1、 在当前主题下的配置文件_config.yml中找到menu这段代码，把tags这一行的“#”去掉即可

1
2
menu:
  tags: /tags/ || fa fa-tags

2、创建标签目录文件

和分类页一样，标签页也是没有默认页面的所以需要我们手动创建标签页。

打开命令行，进入博客项目所在的文件夹下，执行以下命令

1
hexo new page tags

成功后会提示：

INFO Created: ~/blog/source/tags/index.md

这样我们就创建好了标签页面了。但是这个时候主题还不会识别这个页面为标签页；所以我们需要编辑这个新建的页面，让主题识别这个页面，并自动为这个页面显示标签。

3、 编辑页面让主题识别页面为标签页面

上文说到需要编辑页面才能让主题识别这个页面为标签页面，我们只需要根据成功后到提示路径打开index.md这个页面文件，打开后默认内容是

1
2
3
4
---
title: 标签
date: 2021-01-25 22:54:58
---

添加上type: "tags"这段代码，这样就能让主题识别该页面为标签页面了

1
2
3
4
5
---
title: 标签
date: 2021-01-25 22:54:58
type: "tags"
---

4、 给文章设置标签属性

打开需要添加标签的文章，在Front-matter区域，顶部两个---中，添加tags设置标签

注：“-”后面有个空格

4.1 设置单标签

1
2
3
4
5
6
---
title: 开博大吉
date: 2017-10-08 17:48:54
tags:
- Hexo
---

4.2 设置多标签 并同时设置分类

1
2
3
4
5
6
7
8
9
---
title: 开博大吉
date: 2017-10-08 17:48:54
categories: 
- Hexo
tags:
- Hexo
- Blog
---

五、添加本地搜索功能

1、在当前主题下的配置文件 _config.yml 中开启搜索功能

找到local_search，enalbe属性改为true

1
2
local_search:
  enable: true

2、安装 hexo-generator-searchdb 插件

1
npm install hexo-generator-searchdb --save

3、在当前主题下的配置文件 _config.yml 中配置搜索功能

添加以下代码

1
2
3
4
search:
  path: search.xml
  field: post
  format: html

六、设置代码样式

4.1 在当前主题下的配置文件 _config.yml 中搜索到以下代码

1
2
3
4
5
6
7
8
9
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: stackoverflow-light
    dark: stackoverflow-light
  prism:
    light: prism
    dark: prism-dark

4.2 打开网址，选择自己喜欢的样式,根据网站上的代码设置

如这里设置了stackoverflow-light样式，使用时在代码块旁边写明什么语言，如这里是yml就写”```yml”

Posted on Edited on In Views:

1、下载主题

  首先，你需要选择一个你喜欢的主题并下载。在 Hexo 的官方网站（hexo.io/themes）上可以找到许多主题。每个主题的描述旁边通常都会有一个链接，点击这个链接就可以下载这个主题。

  如果链接跳转到了 Github 仓库，你可以直接点击页面右上方的 “Clone or download” 按钮，然后选择 “Download ZIP”。这样就可以下载下来该主题的压缩包。

  还有一种方式是使用 git 命令行工具克隆主题的仓库。首先你需要安装 git 工具，然后在命令行中输入类似于下面的命令：

git clone https://github.com/theme-author/theme-name.git themes/theme-name

2、安装主题

  下载主题后，将主题的整个文件夹复制或移动到你的 Hexo 博客的 themes/ 文件夹中。

3、启用主题

  打开 Hexo 博客的根目录下的 _config.yml 文件，并找到 theme 配置项。将这个配置项的值修改为你刚刚安装的主题的名字。比如，如果你安装的是 Next 主题，就将 theme 配置项的值修改为 next。

4、配置主题

  大部分主题都可以进行自定义配置。通常在主题的文件夹下会有一个 _config.yml 文件，这个文件用于定义主题的配置。每个主题的配置项都不尽相同，具体可以参考主题的文档说明。

  一旦你完成了上面的步骤，你的 Hexo 博客就会使用新的主题了。为了看到改变，你可能需要运行 hexo clean 和 hexo server，然后在浏览器中刷新你的博客网页。如果你在切换主题后遇到问题，记得查看新主题的文档，或者与主题的作者联系。

Posted on Edited on In Views:

一、初始化你的Hexo博客

Hexo 是一个基于 Node.js 的快速、简单且强大的博客框架。以下是 Hexo 的初始化步骤：

1、首先你需要在电脑上安装 Node.js 和 Git。这两者是 Hexo 运行的必要环境。

2、安装 Hexo。打开终端，输入以下命令：

1
npm install -g hexo-cli

这将全局安装 Hexo。

3、创建一个新的 Hexo 项目。替换 <folder> 为你想要的文件夹名，再输入：

1
2
hexo init <folder>
cd <folder>

这将在指定的文件夹中创建一个新的 Hexo 项目，并且进入到这个文件夹内。

4、安装项目依赖。在终端，输入：

1
npm install

这将安装所有 Hexo 项目所需要的依赖。

5、现在，你可以运行 Hexo 服务器来预览你的博客。输入：

1
hexo server

这将启动 Hexo 服务器。你可以在浏览器中输入 localhost:4000 来查看你的博客。

以上步骤便是 Hexo 的基础配置和初始化。

6、创建博客（文章）

1
hexo new [layout] <title>

如 hexo new 开博大吉（开博大吉为文章标题），返回一个 md 文件的路径

7、编辑 md 文件

1
start xxxxxxxxxxxxxxxxxxx.md

内容在第二个---之后编写， （注意：Ubuntu 系统用 xdg-open xxxxxxxxxxxxxxxxxxx.md 命令），或在 source/_posts 文件夹中找到它，并且开始进行编辑。

8、更新

使用 hexo generate 或简写的 hexo g 来生成静态文件，再次运行 hexo server 就可以看到你的新文章了。

二、部署到github

要将 Hexo 博客部署到 GitHub，你需要遵循以下步骤：

1、在 GitHub 上新建一个空 repo ,repo 名称是「用户名.github.io」（仓库名一定要这个格式，不然博客跳转有问题）

2、在你的 Hexo 项目目录下，通过以下命令安装 git 部署插件 hexo-deployer-git：

1
npm install hexo-deployer-git --save

这是一个 Hexo 插件，可以帮助你直接将项目部署到 GitHub。之后再修改博客需要上传，可执行：hexo generate代替该步

3、编辑网站配置 start _config.yml（该文件在hexoblog根目录下）

找到 # Deployment 的部分。在这里，你需要配置如何将你的 Hexo 博客部署到 GitHub。参考以下例子进行设置：

可改项：

1
2
1. 第 6 行的 title 文章标题
2. 第 9 行的 author 作者名

必改项：

1
2
3
4
5
1. type 改成 type: git
2. repo: <repository url>  
3. // 加上该行 repo: 后面有个空格
4. // 与type垂直对齐
5. // 仓库地址为firstblog所对应的地址，仓库地址以 git@github.com:开头

这里，<repository url> 是你的 GitHub 存储库的 URL，应该类似于 https://github.com/<username>/<username>.github.io.git。而 <branch> 则应设置为对应分支名或不写。

4、输入以下命令来生成静态文件并部署到 GitHub：

1
2
3
hexo clean
hexo generate
hexo deploy  // 上传博客系统（包括文章）

也可以使用简写 hexo d -g
现在，你应该可以通过访问 https://<username>.github.io 来查看你的 Hexo 博客网站了。
注意：部署到 GitHub Pages 时，你的仓库名称应遵循 <username>.github.io 的格式，<username> 要与你的 GitHub 账号名一致

5、进入 username.github.io 对应的 repo，打开 GitHub Pages 功能（setting中），就可以直接点击预览链接

Posted on Edited on In Views:

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

0%