使用Hexo+github+netlify快速搭建个人博客网站

1 写在开头

  倒腾了好几天，算是做出了一个有点样子的个人博客网站。便学各位大佬也写一个搭建教程，总结一下个人踩坑经验，也希望能对他人略有作用。
博客演示（欢迎来留言交流）

• 为什么选择Hexo？答：简单快捷，前辈众多。
• 面向：本文面向使用 windows 系统，不懂编程的新手小伙伴。
• 教程内容随意复制使用，引用望加链接
• 博客内容除个人信息外都放在 github 上，您只需要 fork 过去。当然github上有不少大佬的网站模板，可以自行选用一个。
• 本博客实现了原主题的一些美化、创建相册并可选择加密相册、添加个人简历界面等，在后续文章中对Hexo主题Latex公式不正常显示（使用Katex放弃mathjax）、mermaid使用等常用定制操作给出了方案或者贴出了原文链接。
• 如果对本文内容不易接受，推荐参考下面几篇博客来搭建个人网站：
  Hexo+Github 博客搭建完全教程
  Hexo ＋ Github 搭建博客

2 对所使用的一些名词给出解释

  您可以直接跳过本部分，但对之后内容的理解可能会较为晦涩。
  不建议您点击下文给出的链接深入学习，这会耗费大量的时间。这些链接为了内容的完整性而添加的，链接地址基本都指向中文官方文档，如果只需要搭建博客网站您不必理会。

2.1 git

  目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。您只需要使用几个简单的指令来完成博客网站的搭建更新。深入了解点击这里。这里是廖雪峰老师的 git 教程。

2.2 github

  使用 git 来管理的网上仓库。想深入了解可以点击这里

2.3 githubpage

  对于一个放置在 github 上的仓库，可以开启 githubpage 来获得一个展示本仓库的网址。网页内容优先识别一级目录的 index.html，如果没有 index.html 则识别 index.md。当然一个 html 或 md 文件无法构成一个网站，因此 githubpage 可以选择读取一级目录 docs 来展示仓库内容（但需要你在本地部署一下，否则不能正常 deploy，因此 githubpage 并不适合本教程。本文使用的 netlify 则是自动部署），这样 html、css、js 等文件就可以构成一个静态网站。
  网上很多教程都使用了 githubpage，这也是最简单快速的方式。然而本人使用过程很不愉快，因此推荐大家使用 netlify来部署得到一个自己的网址。

2.4 静态网站

  所有数据都预先部署完毕的网站。内容相对稳定，没有数据库的支持。对于个人博客网站来说无需数据库支持，直接将网站数据放置在 github 网站即可。此外静态网站有容易被搜索引擎收录等优势，因此现在广泛流行的动态网站有向静态网站转化的趋势。我们常见的网址上面都带有问号，这可以视为动态网站的标志。

2.5 npm 和 yarn

  两者都是强大的包管理器。
  npm 是世界上最流行的包管理器。你可以使用npm来安装依赖包。如果决定使用 npm，后文你将会使用 npm 的简单命令来安装依赖包。使用安装依赖包会产生一个 package-lock.json 文件，这是 npm5 用于版本控制而引入的（在 npm5 之前 yarn 在版本控制和速度方面大占上风），如今 npm 的版本已经到达了 v7，因此不必担心 npm 会比 yarn 逊色。深入了解点击这里
  yarn 也是一个相当强大的包管理器，你可以选择yarn来安装依赖包。相比 npm，yarn 的语法更简洁，由于 yarn 本身是为了弥补 npm 的不足而问世的，因此在 npm5 之前 yarn 相较 npm 优势较大，但 npmv5 问世后优势已经大幅缩小。如今 npm 的版本已经到达了 v7，因此使用 npm 还是 yarn 取决于你自己。使用 yarn 安装依赖包会产生一个 yarn.lock 文件，这是 yarn 的版本控制文件。深入了解 yarn 点击这里。

2.6 nodejs

  JavaScript 环境。由于现在的npm集成在 nodejs 里，下载 nodejs 即可使用 npm 命令。深入了解点击这里和这里，后者是知乎用户对 nodejs 介绍的翻译。

2.7 Hexo

  Hexo 是一个基于 Node.js 的快速、简单且强大的静态网站框架。Hexo 使用 Markdown（或其他标记语言）解析您的文章，能在短短几秒内通过预定义的主题生成静态框架。深入了解点击这里

2.8 包(package)(或称模块(module))

  代码通过包来共享，一个包里包含所有需要共享的代码，以及描述包信息的文件，称为 package.json。通过包管理器您可以使用全世界开发者的代码，或者分享自己的代码。

3 迅速得到自己的网站

不同于一般教程先在本地安装各种库，本文首先给出生成网页的部分。具体步骤为：

3.1 copy 模板并部署你的网站

  直接将我的模板fork 到自己的 github 账号中。如果还没有 github 账号百度注册,然后点击本博客模板，进入页面后点击右上角 fork（类似于复制到自己的网上仓库）。

3.2 使用 Netlify 生成网站

  Netlify是一个提供静态资源网络托管的综合平台，提供 CI 服务，能够将托管 GitHub，GitLab 等网站上的 Jekyll，Hexo，Hugo 等代码自动编译并生成静态网站。
  构建个人网站只需要使用其免费功能即可获得良好的体验。

1. 注册Netlify并登录
2. 创建 site
   
3. 选择 github 为存放网站数据的 git provider。
   
4. 选择存放网站数据的 github 库
   
5. 选择构建分支、构建命令和静态文件目录，点击 Deploy site 发布。如果是直接 fork 过去则直接 deploy 即可。
   如果您没有特殊需求，直接按照默认选项即可。
   
6. 大约半分钟之内构建完成，得到自己的网址。
   

3.3 绑定自己的域名

  使用netlify得到的网址冗长无意义，可以申请一个自己的域名。可以去阿里云腾讯云等，普通后缀的域名第一年八块。也有免费的域名申请，但是需要梯子而且个人经验不容易成功，即便成功也不好用。操作可以参考本文的后续篇Hexo主题定制。

4 本地管理自己的网站

  首先来分析一下 fork 到自己仓库的内容。

• scaffolds：Hexo 的模板文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo 的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改 scaffold/post.md 中的 Front-matter 内容，那么每次新建一篇文章时都会包含这个修改。
• source：资源文件夹是存放用户资源的地方。除_posts 文件夹之外，开头命名为_ (下划线)的文件、文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
• source/_posts 文件夹：存放博客内容的地方
• themes：主题 文件夹。Hexo 会根据主题来生成静态页面。
• _config.yml：网站的 配置 信息，您可以在此配置大部分的参数。
• package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。
    我们使用了 netlify 使用 hexo 方式来部署网站，因此您只需要添加修改\source_posts 文件夹中的 markdown 文件就可以完成一些博客文章的添加修改。但更多对于网站的修改仍然需要本地操作。

4.1 需要进行的安装

安装 git（管理网上仓库），nodejs（生成 JavaScript 环境来使用 hexo 框架），hexo（本文使用的博客框架）

1-4可以参考hexo 官方文档来完成。

1. 安装 git：为了管理远程仓库，需要用到 git。点击这里下载。安装后打开 cmd 输入

   git --version

   来检查是否安装成功。
2. 安装 nodejs：Hexo 是基于 node.js 编写的，此外 nodejs 现在自带包管理工具 npm。点击这里下载，选择任意一个版本安装，安装选项默认即可。安装后打开 cmd 输入

   node --version

   和

   npm --version

   来检查是否安装成功。
3. 如果 cmd 中没有反应，可能是环境变量没有设置正确。设置一下环境变量
4. 安装 Hexo：随意选择一个空文件夹鼠标右键选择

   git bash here

   输入

   npm install -g hexo-cli

   。安装完后打开 cmd 输入

   hexo --version

   来查看是否安装成功。对于熟悉 npm 的进阶玩家，可以仅局部安装 hexo 包。

如果您想使用 yarn 来安装依赖，您需要先安装 yarn，点击here安装 yarn。

4.2 远程仓库连接本地

现在我们已经安装了 git，首先将 github 和本地关联起来。

1. 设置全局信息

   git config --global user.name "yourname"
   git config --global user.email "youremail"

     yourname 为 GitHub 用户名，youremail 输入 GitHub 的邮箱。这样 GitHub 才能确定是不是相对应的账户。
     使用下面的命令检查是否安装正确：

   git config user.name
   git config user.email

2. 创建密钥
     在

   git bash

   (或 cmd）中输入

   ssh-keygen -t rsa -C "youremail"

   一路回车直到出现

   cat ~/.ssh/id_rsa.pub

   ，这说明密钥已经生成。密钥存放在个人的主文件夹下，一般来说是

   C:\Users\PC\.ssh

   
   

3. 将公钥放入 github
     打开 github，在头像下面点击 settings，再点击 SSH and GPG keys，新建一个 SSH，名字随便取一个都可以，把你的 id_rsa.pub 里面的信息复制进去。如图：
   
     在 cmd 或者

   git bash

   输入

   ssh -T git@github.com

   来查看是否成功。第一次输入会出现警告信息，忽略即可。
   

4. 将远程仓库 clone 到本地。先找到自己的

   SSH key

   如下图
   
     使用 https 也可以但没有 ssh 速度快。找到

   SSH key

   后输入

   git clone your_SSH_key

   即可将远程仓库 clone 到本地。

4.3 本地写文章、发布文章

强推 vscode来配合 git 使用。如果还不会使用 vscode 建议您安装学习一下，下面的命令都可以在 vscode 中完成。vscode 提供了丰富的扩展支持不同的语言，vscode 对 git 来说十分友好，您可以在 vscode 的左侧用鼠标点击的方式完成

git add系列操作

git commit系列操作

git push系列操作

1. 首先要将相关模块安装到本地。打开

   git bash

   输入

   npm install

   ，这个命令默认安装 package.json 中的所有模块。（如果选择了 yarn，命令是

   yarn

   。没错，yarn 的语法更加简洁！）
2. 安装

   hexo-deployer-git

   
     在博客根目录（即 clone 到本地文件夹的一级目录）安装一个依赖

   npm i hexo-deployer-git

   （yarn 的命令是

   yarn add hexo-deployer-git

   ）
3. 在

   git bash

   输入

   hexo new post "article title"

   来新建一篇文章（其实直接在\source_posts 文件夹新建一个 markdown 文件即可。将你的博客内容写入 markdown 文件即可。
4. 在修改了本地内容后，需要将修改的内容提交并 push 到远程仓库。
   在

   git bash

   输入

   git add .

   会将当前 git 控制的文件夹的所有修改提交到缓存区。
   在

   git bash

   输入

   git commit -m "修改说明"

   会提交所有的修改
   在

   git bash

   输入

   git push origin master"

   会提交将所有的修改同步到远程仓库。

5 个人定制

  包括相册、网站特效、域名使用等内容，具体见本博客网站的Hexo主题定制，会不断保持更新。如果有需求请评论留言（去留言板留言）

  生活愉快，不断进步~~~