1 Hexo + vscode + github pages 搭建属于自己的博客

Hexo 是高效的静态站点生成框架，它基于 Node.js。通过 Hexo，你可以直接使用 Markdown 语法来撰写博客。本文搭建的环境是 Windows10。

安装 Node.js

首先下载稳定版 Node.js：https://nodejs.org/en/download/。
安装选项全部默认，一路点击 Next。

在 Windows PowerShell 中输入：

$ node -v
$ npm -v

如果没有报错，便说明安装成功。

安装 Git 与 vscode

为了把本地的网页文件上传到 github 上面去，我们需要用到分布式版本控制工具：Git下载地址。安装选项还是全部默认，只不过最后一步添加路径时选择 Use Git from the Windows Command Prompt，这样我们就可以直接在命令提示符里打开 git 了。安装完成后在命令提示符中输入 git --version 验证是否安装成功。

vscode 的安装便比较简单，直接按照提示安装即可。

创建 GitHub Pages

在你的 GitHub 主页打开如下界面：

创建 repo

然后如下图所示，输入自己的项目名字，后面一定要加 .github.io 后缀，README初始化也要勾上。名称一定要和你的github名字完全一样，比如你 github 名字叫abc，那么仓库名字一定要是 abc.github.io。

然后项目就建成了，点击 Settings，向下拉到最后有个 GitHub Pages，点击 Choose a theme 选择一个主题。将 GitHub Pages 生成的网址复制到如下位置：

点击网址 https://xinetzone.github.io/，便会显示：

此页面的内容是由 xinetzone/xinetzone.github.io 根目录的 README.md 提供的。

使用 vscode 打开本地的一个文件夹：

选择 Git Bash 作为默认：

为了提高 npm 运行速度需要添加淘宝源：

 $ npm config set registry https://registry.npm.taobao.org

运行如下命令安装 hexo：

$ npm i hexo-cli -g

安装完后输入 hexo -v 验证是否安装成功。将你在 GitHub 上的 reop 克隆至本地，并切换到 hexo 分支（用于存放网站的源代码）：

$ git clone https://github.com/xinetzone/xinetzone.github.io.git
$ cd xinetzone.github.io/
$ git checkout hexo

创建一个目录用于存储博客文件，切换目录并初始化网站：

$ mkdir docs
$ cd docs/
$ hexo init
$ npm install

其中 hexo init 为网站初始化环境，npm install 安装必备的组件，我们可以看到 blog 目录下生成如下目录：

node_modules: 依赖包
public：存放生成的页面，运行 hexo g 便会生成，而 hexo clean 便会删除
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
_config.yml: 博客的配置文件

这样本地的网站配置也弄好啦，输入 hexo g 生成静态网页，然后输入 hexo s （hexo serve）打开本地服务器：

这样便可以在 http://localhost:4000 预览网站了：

使用 Ctrl + C 可以把服务关掉。

将 hexo 与 github 关联起来

首先输入如下命令，配置 Git 的环境：

$ git config --global user.name  xinetzone
$ git config --global user.email xinzone@outlook.com

用户名和邮箱根据你注册 github 的信息自行修改。然后生成密钥 SSH key：

$ ssh-keygen -t rsa -C "xinzone@outlook.com"

查看 id_rsa.pub：

$ cat ~/.ssh/id_rsa.pub

打开你自己的 github，在头像下面点击 settings，再点击 SSH and GPG keys，新建一个SSH，名字随便，然后将 id_rsa.pub 复制粘贴到指定位置。在 git bash中，查看是否成功：

$ ssh -T git@github.com

打开博客根目录下的 _config.yml 文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。

将 hexo 部署到 GitHub 修改最后一行的配置：

deploy:
  type: git
  repository: https://github.com/xinetzone/xinetzone.github.io.git
  branch: master

其中 repository 可以通过如下方法获取：

repository

repository 修改为你自己的 github 项目地址。接着需要先安装 deploy-git，也就是部署的命令，这样你才能用命令部署到 GitHub。接着 hexo clean 清除了你之前生成的东西，也可以不加。 hexo g 顾名思义，生成静态文章是 hexo generate 的缩写 hexo deploy 部署文章，可以用 hexo d 缩写：

$ npm install hexo-deployer-git --save
$ hexo clean | hexo g | hexo d

这时打开你的 github.io（https://xinetzone.github.io/）主页就能看到发布的文章：

为了添加博客，需要：

$ hexo new post "博客名"

然后打开 blog\source\_posts 的目录，可以发现下面多了一个文件夹和一个 .md 文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。

备份博客源文件

将本地的 hexo 分支推送到远程：

$ git add .
$ git commit -m "hexo init"
$ git push origin hexo