GithubPages+Hexo搭建个人博客记录

本文最后更新于：2021年1月29日 下午

记录一下简单流程和出现的问题。

本文基本上是一个基本步骤的记录，没有太多的讲解，如果希望了解更多原理性知识，推荐阅读文章末尾的链接。

提示：部分网上很多的安装教程基本都进行了简略，以后闲的话可能会补一下（flag插好_(:з」∠)_）

一、环境搭建

首先明确需求：

  • 服务器：GitHub Pages

  • 博客框架：Hexo

因此要做的准备有如下：

1. 准备GitHub Pages

  1. 安装 git
    通过 $ git --version 测试是否安装成功。
  2. 注册GitHub账户并配置SSH key
  3. 在GitHub上开启GitHub pages服务（其实就是创建一个仓库，仓库的名字必须是 username.github.io）
    到这步可以测试一下：在浏览器输入 https://username.github.io 能否访问成功

2. 准备Hexo

  1. 安装 node.js
    通过 $ node --version 测试是否安装成功。

  2. 通过npm安装 Hexo，终端输入命令：

    $ npm install -g hexo-cli

  3. 创建站点根目录（站点根目录中的文件就是我们博客所需的资源）：
    Hexo会在指定的这个站点根目录中创建所需要的文件

    $ hexo init <指定目录>
$ cd <指定目录>
$ npm install

  4. 预览博客：输入 $ hexo server 。浏览器访问 http://localhost:4000/ 即可看到当前根目录对应的博客资源

  5. 根据站点根目录内容生成静态文件：输入 $ hexo generate。生成的文件位于 /public/ 文件夹中，下一步就需要将生成的静态文件上传到GitHub仓库中

2.1 站点目录结构分析

  • .deploy_git：hexo g 生成

  • node_modules/：安装包的目录，执行 npm install 的时候会重新生成

  • scaffolds/：文章的布局

    • 当创建新的文章时，Hexo会根据scaffold里的不同布局来建立文件，默认布局由 _config.yml 中的 default_layout 参数指定。

    • 不同布局创建的文章保存路径有所区别：

      布局 路径
      post source/_post
      page source/
      draft source/_draft
      自定义 source/_post

  • source：博客文章的.md文件。除\_post文件夹外，开头以_（下划线）命名的文件/文件夹或隐藏文件都会在generate时被忽略。

  • themes/：主题文件夹

  • .gitignore：限定在push时哪些文件可以忽略

  • _config.yml：站点的配置文件。配置参数参考：Hexo配置参数说明

  • db.json：hexo g 生成的文件

  • package.json：应用程序信息，包括hexo的版本信息和所有安装的依赖

  • .git/：标志这是一个git项目

  • public：hexo g 生成的静态网页

总结下，需要备份的文件有：scaffolds/、source、themes/、_config.yml、package.json、.gitignore

2.2 Hexo指令参考

$ hexo init [folder]

  • 新建一个网站根目录，进行初始化。

$ hexo clean

  • 清除缓存文件 (db.json) 和已生成的静态文件 (public)。如果发现对站点的更改无法生效，可能需要运行该命令。

$ hexo new [layout] <title>

  • 新建一篇文章，标题含有空格的话需要用单/双引号括起来。
  • layout：文章布局。默认由 _config.yml 中的 default_layout 参数指定
  • 参数：
    • -p, –path 自定义新文章的路径（默认情况下会解析标题来确定路径）
    • -r, –replace 如果存在同名文章，将其替换
    • -s, –slug 文章的 Slug，作为新文章的文件名和发布后的 URL

$ hexo generate/g

  • 生成静态文件。（将souce文件夹下的Markdown和HTML文件解析到了public文件夹下）

  • 参数：

    • -d, –deploy 文件生成后立即部署网站

    • -w, –watch 监视文件变动

    • -b, –bail 生成过程中如果发生任何未处理的异常则抛出异常

    • -f, –force 强制重新生成文件。使用该参数的效果接近 hexo clean && hexo generate

    • -c, –concurrency 最大同时生成文件的数量，默认无限制

$ hexo publish [layout] <filename>

  • 发表草稿。草稿默认不会显示在页面中。

$ hexo server/s

  • 启动服务器。默认情况下，访问网址为：http://localhost:4000/

  • 参数：

    • -p, –port 重设端口
    • -s, –static 只使用静态文件
    • -l, –log 启动日记记录，使用覆盖记录格式

$ hexo deploy/d

  • 部署网站。（将本地资源部署到服务器，我这里也就是GithubPages中）
  • 参数：-g, –generate 部署之前预先生成静态文件

$ hexo render <file1> [file2] ...

  • 渲染文件。
  • 参数：-o, –output 设置输出路径

$ hexo migrate <type>

  • 从其他博客系统迁移内容。可从RSS、Jekyll、Octopress、WordPress、Joomla中迁移，具体参考 博客迁移

选项：

$ hexo --safe

  • 安全模式。不会载入插件和脚本。在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

$ hexo --debug

  • 调试模式。在终端中显示调试信息并记录到 debug.log。

$ hexo --silent

  • 简洁模式。隐藏终端信息。

$ hexo --draft

  • 显示 source/_drafts 文件夹中的草稿文章。

$ hexo --cwd /path/to/cwd

  • 自定义当前工作目录（Current working directory）的路径。

3. 将静态文件部署到对应的仓库中

  1. 打开站点根目录中的 _config.yml 文件，找到deploy字段（在最下面），将其用以下内容替换：

    deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

  2. 安装插件（注意要在站点根目录下执行该操作）：$ npm install hexo-deployer-git --save

  3. 部署： $ hexo deploy（建议执行该步前先 $ hexo clean）


二、内容管理

博客发布的内容都位于 source/_post/ 文件夹中。

  1. 创建新文章：$ hexo new 'title'
  2. 创建成功后会发现 source/_post/ 中多了一篇相同标题的.md文件，打开该文件编辑即可
  3. 编辑完成发布：$ hexo g -d

也可以在source/_post/目录下手动创建.md文件，但这时就需要你自己手动复制一下poster：

---
title: 
date: 
tags: 
categories: 
---

删除文件则直接在文件夹内手动删除然后重新部署就好了。


三、主题修改

我本人使用的是 landscape 主题，不过你可以挑选任何你喜欢的主题主题商城，我这里建议使用 NexT 主题，因为它的各方面插件都比较完善不需要费太多时间。

修改主题步骤：

  1. 下载主题文件夹到/themes/目录下
  2. 修改站点配置文件中的theme字段，e.g. 
    theme: landscape

四、检索配置

1. 配置sitemap文件

  1. 在站点根目录下输入以下命令：

    $ npm install hexo-generator-sitemap —save
$ npm install hexo-generator-baidu-sitemap —save

  2. 在站点根目录的配置文件_cpnfig.yml中添加：

    # sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

  3. 执行：$ hexo g
    public文件夹下多了 sitemap.xml 和 baidusitemap.xml 两个文件，这就是供搜索Google和百度引擎爬虫抓取的站点地图。

2. Google站点验证

  1. 进入 Google站点管理工具 ，选择网址前缀，在网址中输入你的博客地址。
  2. 下载HTML文件，将文件放到站点根目录下的 /public 文件夹中
  3. 执行 $ hexo d
  4. 等待一分钟左右，返回Google页面点击验证
  5. 验证成功后再次回到 Google站点管理工具 。在右侧工具栏中找到 站点地图 选项。
  6. 在界面中输入 sitemap的存放路径。因为public为站点的实际根目录，所以输入的是 sitemap.xml
  7. 等待一段时间即可通过Google检索到

注意这里Google会先显示站点地图无法获取，但其实后台已经在处理了，大概等1~2天就能检索到。

3. 百度站点验证

参考：https://www.cnblogs.com/lfri/p/12219639.html


五、遇到的问题＆总结

  1. 频繁在修改网站资源需要预览时使用 hexo s 先在本地调试，直接部署的话太慢了，刷新记得 ctrl+F5
  2. 如果用vscode编辑配置文件，要进行部署的时候记得在vscode把文件先关闭，不然会报错



参考链接：

https://sketchk.xyz/2017/03/24/A-Guide-Of-Making-Your-Personal-Blog-Part-1/

https://juejin.im/post/6844904131266609165#heading-18

配置
记录 Hexo

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！