Hexo + Github 搭建个人网站

Posted on Edited on In Views:
Symbols count in article: 5.4k Reading time ≈ 5 mins.

从写同人文到码代码, 一直想做一个个站, 但是并没有这方面的经验, 所以参考知乎文章自己试了一下, 并且根据使用的 Hexo 模板 NexT 的官方文档进行了一些常规设置.

总而言之是一个傻瓜教程, 给诸位饱受屏蔽的姐妹们一个方向. 我也依旧在摸索中, 欢迎一起讨论在使用过程中碰到的疑难w

这篇教程是 Windows 教程, 如果是 Mac 用户可以将之后的 Git Bash 中的操作替换为 Terminal 中直接进行, 基本类似, node 和 git 可通过 homebrew 下载 (可搜索相关教程, 这里不再累述).

Windows 准备工作 / Preparation for Windows

  1. 安装 NodeJS

    • 命令行验证安装:
      1
      2
      $ node -v # 将显示 node 版本号
      $ npm -v # 将显示 npm 版本号

  2. 安装 Git

    • 命令行验证安装:
      1
      $ git # 将显示所有 git 命令

  3. 一个 Github 账号, 若没有可注册一个 (注册后需要及时验证邮箱)

Git 配置 / Git Setting

我个人经常看的 Git 教程是廖雪峰老师的这篇.但是实际上我们在搭建过程中并不需要了解那么多x.

  1. 打开 Git Bash, 执行如下命令:

    1
    2
    3
    4
    5
    # 请自行替换以下双引号中的内容
    $ git config --global user.name "你的GitHub用户名"
    $ git config --global user.email "你的GitHub注册邮箱"

    $ ssh-keygen -t rsa -C "你的GitHub注册邮箱" # 之后一直回车结束, 默认不为密钥设置密码

  2. 打开执行 ssh-keygen 命令的路径 (它会显示在你的 Git Bash 窗口最上面), 在路径后加上 \.ssh 进入隐藏的文件夹 (完整的路径名一般默认是C:\Users\username\.ssh, 其中 username 是你的主机的当前用户名), 使用不是记事本的记事本工具 (比如 notepad, notepad++, sublime, 甚至vscode, 建议装一个 vscode, 后续的文章编写也方便使用它编辑), 打开 id_rsa.pub, 并复制全部内容.

  3. 登录 Github 到设置里, 点击 New SSH key, title 可以随便设置, key 里面把刚刚复制的内容粘贴进去, 并点击 Add SSH key 确认.

  4. 回到 Git Bash, 通过命令 ssh git@github.com查看 SSH 是否设置成功. 如成功应当显示如下内容:

    1
    2
    3
    $ ssh git@github.com
    PTY allocation request failed on channel 0
    Hi shinko1998! You've successfully authenticated, but GitHub does not provide shell access.

安装 Hexo / Installation of Hexo

1
2
3
4
5
6
7
$ npm install -g hexo-cli
# 等待完成后继续执行初始化, 其中 blog 可替换为任意你希望使用的文件夹名.
$ hexo init blog
$ cd blog
$ hexo g # 等同于 hexo generate
$ hexo s # 等同于 hexo server
# 保持这个窗口不关闭, 在浏览器中输入地址 localhost:4000 查看当前网站雏形.

其他 Hexo 命令可以通过 hexo help 查看, 而具体命令有哪些参数可用可以通过 hexo help [command] (如 hexo help generate) 来查看, 当然可读性更高的方法还是从网上去查别人整理好的教程.

部署到 Github Pages / Deployment

回到 Github 首页, 选择左侧栏一个绿色的 New 按钮新建仓库 (repository). 仓库名设置为 [你的用户名].github.io, 你的用户名参见 owner 下面显示的内容, 如果有大写就全部改成小写. 最后点击 Create repository 确认建立, 建立后进入仓库, 点击绿色按钮 Clone or download, 复制其中的地址.

之前说到需要一个不是记事本的记事本工具, 因为之后我们经常需要打开 .yml 或者 .md 文件, 系统自带的记事本经常会出现不可知的问题, 所以建议下载一个 vscode.

如果你是 vscode 用户

  1. 打开 vscode, 选择 File > Open Folder.., 选中之前使用 hexo 生成的项目 (在当前例子中即选中之前的 blog 文件夹)

  2. 在左侧结构图中找到根目录下的 _config.yml, 双击打开, 找到最后一行, 在 deploy 后面增加如下内容:

    1
    2
    3
    4
    deploy:
      type: git
      repo: git@github.com:shinko1998/shinko1998.github.io.git
      branch: master

    其中, repo 行的内容就粘贴你刚刚复制的地址

  3. 解释一下部分个性化设置的内容:

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: # 显示在浏览器标签栏上的内容
    subtitle:
    description: # 类似于个人签名, 会在一些主题中显示
    keywords:
    author: # 你的 id
    language: # 语言, 根据不同的模板可以进行设置
    timezone:

如果你不是 vscode 用户

随便用一个不是记事本的记事本工具打开 _config.yml, 重复以上操作

此时如果你部署代码, 在 Git Bash 中执行如下命令:

1
$ hexo d # 等同于 hexo deploy

再从浏览器打开 [你的用户名].github.io, 就可以看到刚刚从本地看到的内容了.

付费内容-域名 / Domain Name

以上的免费内容其实基本就够用了, 但是如果你想要一个更加个性化的域名, 比如 xxx.com, 就需要去购买域名了. 这里推荐使用阿里云.

  1. 登录后找到域名注册, 输入你想要的域名, 比如我就输入了 shinko

  2. 找到一个价格合适且能备案的域名 (如果不能备案购物车里会提示), 点击立即结算, 选择购买年份, 选择域名持有者为个人, 然后选择创建新的信息模板

  3. 创建模板是按顺序一步步走的, 创建好后需要验证邮箱并进行实名认证, 不作累述

  4. 回到之前的购买网页, 刷新并选择刚刚创建的模板, 点击下方立即购买, 付费过程不作累述

  5. 购买成功后进入域名控制台, 找到刚刚购买的域名, 点击右侧的解析, 点击添加记录, 增加两行内容:

    | 记录类型 | 主机记录 | 记录值 |
    | ————— | —————-| —————-|
    | A | [留空] | 185.199.109.153 |
    | CNAME | www | [你的用户名].github.io |

    上面那个 IPv4 地址可以通过在命令行 ping [你的用户名].github.io 得到.

  6. 添加好后再回到 Github 你刚刚添加的仓库中, 点击 Settings, 翻到最下面 Github Pages, 在 Custom domain 中填写你刚刚购买的域名并保存

  7. 打开一个不是记事本的记事本工具, 新建一个记事本, 在里面写上刚刚购买的域名, 不要加 www, 如我刚刚购买了 shinko.live, 则在记事本里填 shinko.live, 另存为 CNAME, 保存类型选择为所有文件 (即不添加任何后缀名)

  8. 回到 Git Bash, 在 blog 目录下 (如果你刚刚没有关, 那么直接继续即可, 如果你关掉过, 那么请先执行 cd blog) 顺次执行以下命令:

    1
    2
    3
    $ hexo clean
    $ hexo g
    $ hexo d

  9. 在浏览器输入你购买的域名, 查看是否效果和你刚刚在 [你的用户名].github.io 看到的一样, 如果显示 404, 那么打开你的 blog 文件夹, 删除里面最上面的 .deploy_git/ 文件夹, 再次执行上一步中的三个命令

更换主题 / Themes

当我们执行 hexo init 命令时, 会默认下载一个主题 landscape, 我们可以在官方的主题库里看看其他的主题. 这里我推荐 NexT, 因为使用它的人很多, 如果有问题也比较好查找相关的教程.

  1. 执行如下命令将 NexT 下载到主题中的 next 文件夹中:

    1
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next

  2. 打开 _config.yml, 找到 theme 行, 把 landscape 改成 next, 改完后效果如下:

    1
    theme: next

NexT 主题的详细使用方法可以参见官方文档和其他教程.

编辑文章 / Edit Articles

新文章通过命令 hexo new "article_name" 来创建, 这样会自动创建一个标题为 article_name 的文章, 格式为 .md, 位于 ~\blog\source\_posts 目录下.

.md 是 markdown 格式的后缀名, 回到我刚刚推荐使用 vscode 的原因, 在 vscode 中选择左上方有一个按钮 Open Preview to the Side, 就能在右侧同步显示编辑的 markdown 文档.

就写作而言, 只需简单学会一些简单的 markdown 排版格式, 可以参见这个 Github 仓库.

上传图片 / Upload Pictures

对图手太太来说需要了解另外一个工具, 图床. 因为虽然我们可以将图片作为网站资源直接加载, 但是这样速度会很慢, 而且浪费资源. 这里推荐一个国内使用的图床, 可以参考这篇教程.

完善细节 / Perfect Details

增加选项卡 / More Menu Items

主题默认有归档页, 但是我们往往也需要 tags 和 categories 的功能, 那么可以通过以下步骤增加选项卡:

  1. 首先在 Git Bash 中执行:

    1
    2
    $ hexo new page "Tags"
    $ hexo new page "Categories"

  2. 打开 ~\blog\source\Tags\index.md, 在 title 下增加一行:

    1
    type: "tags"

    同理, 在 ~\blog\source\Categories\index.md 下增加 type: "categories"

  3. 打开 ~\blog\themes\next\_config.yml, 查找 Menu Settings, 把 tags 和 categories 行前的井号 (#) 删除.

  4. 使用时仅需要在文章前增加两行就可以自动分类了, 比如我这篇文章前面的内容是这样的:

    1
    2
    3
    4
    5
    6
    ---
    title: Hexo + Github 搭建个人网站
    date: 2019-08-03 18:32:11
    tags: Hexo
    categories: Websites
    ---

原创许可协议 / Creative Commons

原创作者的话应该都很熟悉 Creative Commons, NexT 也支持在文章后面或者侧边栏增加许可协议.

打开 ~\blog\_config.yml, 搜索 Creative Commons, 修改以下项目:

1
2
3
4
5
creative_commons:
  license: by-nc-sa # 你想要的协议, 具体可以在官网上查看
  sidebar: true # 侧边栏展示选项, 如果不要则设置为 false
  post: true # 每篇更新展示选项, 有一个位于 ~\blog\themes\next\layout\_partials\post\post-copyright.swig 的文件用于生成许可模板, 可以进行魔改使之显示成你需要的格式
  language: # 许可协议语言

显示预览 / Preview

首页默认显示全篇文章, 如果需要显示预览, 在 ~\blog\themes\next\_config.yml 中搜索 auto_excerpt 修改如下:

1
2
3
auto_excerpt:
  enable: true
  length: 150 # 预览显示长度

其他功能 / Other Functions

可以参考这篇文章.

BTW

记得每次写了新的文章之后都 hexo g + hexo d. 如果碰到无法更新的情况, 依旧和之前一样删除 ~\blog\.deploy_git\ 文件夹, 再 hexo clean\ + hexo g + hexo d.

  • Post author: Shinko
  • Copyright Notice: All articles in this blog are licensed under BY-NC-SA unless stating additionally.