GeanRain Printer

各种对各种错的软硬件笔记

0%

hexo + Github 搭建笔记

Posted on Edited on

开始

其实 Hexo 在官网已经非常清除的说明了安装过程…个鬼喔，踩了一堆坑，文章仅仅是笔记，碰到的问题有限，仅限参考。

因为目前常用的系统仍然是 Windows，所以还是使用 Windows 下的 Ubuntu 子系统，并且发布在 GitHub 上。

安装

Ubuntu 子系统

只要是 2017/10 (1709) 后发布的 Windows 10 版本都能安装 Ubuntu 子系统。可以 win + r 调出运行窗口，输入 winver 指令查看版本号

启动 WSL

以管理员身份打开 PowerShell

如果你的系统版本还没更新到 2004，那使用 WSL 1

1
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

如果你的系统版本比 2004 更加高，那使用 WSL 2

1
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

然后重启系统

安装 Ubuntu

重启后在 Microsoft Store 里搜索 Ubuntu

Ubuntu On Windows 官方图

安装后首次启动会执行安装，安装后输入用户名与密码

Ubuntu On Windows 官方图

目前 Ubuntu 已安装完毕

配置环境

先更新一下源

由于系统初始化的源是官方源，国内访问相对来说比较慢，所以需要换成国内源。如果有办法加速官方源那可以跳过这一步。

1
sudo vi /etc/apt/sources.list

更换的是清华的源，为了偷懒就不整个文件重写，直接替换域名字段。进入 vi 后直接在英文状态下敲打下面指令

1
:%s/archive.ubuntu.com/mirrors.tuna.tsinghua.edu.cn/g

然后输入下面指令保存退出

1
:wq

回到终端，执行命令更新源

1
sudo apt update

安装 node.js

有两个方法安装，两种方法配置出来的环境各有不同，apt 安装，使用 npm 可能存在权限问题，手动安装则不会。推荐手动安装。

使用 apt 直接安装

1
sudo apt install nodejs

当然这样安装版本可能会比较低，官方提供各种版本的安装方式，可以参考安装新版本。也可以使用 nvm 工具管理 node-js 版本。

手动安装

在官方下载页面找到对应系统的包，目前方案使用 Linux Binaries (X64) 版本的二进制包，复制下载链接后，在 Ubuntu 中访问你想存放 node-js 的目录，下载并解压。

1
2
wget https://nodejs.org/dist/v14.15.5/node-v14.15.5-linux-x64.tar.xz
tar -xvf node-v14.15.5-linux-x64.tar.xz

也可以通过源码编译后安装

1
2
wget https://nodejs.org/dist/v14.15.5/node-v14.15.5.tar.gz
tar -zxvf node-v14.15.5.tar.gz

编译安装

1
2
3
cd node-v14.15.5
./configure
make

无论下载二进制包还是自己编译，都需要配置一下环境变量，注意这里修改的是用户的 profile。

1
vi ~/.profile

在底部添加两行，把 node-js 和 npm 添加到环境变量中。

1
2
3
# node-js
export NODE_HOME=解压时包所在根目录的绝对地址/bin
export PATH=$NODE_HOME:$PATH

保存退出后激活修改

1
source ~/.profile

然后验证一下

1
2
node -v
npm -v

到这里，hexo 的环境已搭建完成

安装 hexo

一般安装 node-js 过程会把 npm 也安装上，使用 npm 安装

1
npm install -g hexo-cli

安装成功后查看版本号

1
hexo -v

如果想装最新版本，也推荐装最新版本，发现 hexo 的版本并不是最新的，可以使用工具升级。在 hexo 的目录下

1
2
3
4
5
6
npm install -g npm-check
npm-check
npm install -g npm-upgrade
npm-upgrade
npm update -g
npm update --save

安装更新后发现版本号仍然没更新，看到官方的 Issues 里一个老哥给的解决方式

Run

1
npm i hexo@5.2.0

The latest version of hexo-cli is 4.2.0 thus you don’t need to upgrade it globally

安装后版本号到最新。

到目前 hexo 已安装完毕。

建站

初始化

访问到需要存放博客的路径，这个地方是存放原始文章的地方。

1
2
3
4
5
# 新建并初始化一个站点
hexo init <folder>
# 安装站点
cd <folder>
npm install

到这一步，站点布置已经完成，可以生成静态文件看看效果

1
2
hexo g  # 生成静态文件
hexo s  # 启动预览服务

能正常访问说明站点布置成功

配置

编辑一下博客目录下 _config.yml 文件，具体可以查看官网介绍，这里就贴出比较重要的设置

1
2
3
4
5
6
7
8
# Site
title: Hexo  # 网站主标题
subtitle: ''  # 网站副标题
description: ''  # 网站描述
keywords:  # 网站关键词
author: John Doe  # 作者
language: en  # 网站使用的语言，简体中文设置为 zh-Hans
timezone: ''  # 时区，中国大陆可以设置为 Asia/Shanghai

写文章

可以使用指令来新建一篇文章

1
hexo new [layout] <title>

这样新建文章，hexo 会在文件内初始化一些参数

1
2
3
4
5
6
7
---
title: foo
date: 2021-02-15 19:28:03
tags:
	- tags1
	- tags2
---

这些参数能帮助索引文章等，其他参数可以参考官网。你也可以自行新建文件后添加。当你写完文章后，重新生成静态文件即可。

更新到 Github 上

建立 Github Page

创建账号后创建一个与账号同名的仓库，这样可以使用<你的 GitHub 用户名>.github.io ，注意一个账号只能创建一个静态站点

安装 git

1
sudo apt install git

配置本地用户

1
2
git config --global user.name "GitHub 的用户名"
git config --global user.email "创建 GitHub 时的邮箱"

生成 SSH key

1
ssh-keygen -t rsa -C "创建 GitHub 时的邮箱"

生成过程有三个让用户输入的自定义参数，如果没什么特殊要求直接留空回车

创建完成后需要吧 public key 加入到 GitHub 账号中，输入下面指令可以获取刚刚生成的 public key

1
cat ~/.ssh/id_rsa.pub

输出的内容全选复制，来到 Github 账户设置，找到 SSH and GPG Keys 一项，添加 SSH Key，把刚才复制的 public key 添加进 key 项，保存。到这一步，你使用系统的 git 无密码推送更新。

到这一步，可以根据官网的多个步骤把静态站点推到 Github 上。鬼才做那么多步骤，所以使用一键工具 hexo-deployer-git

安装 hexo-deployer-git 工具

1
npm install hexo-deployer-git --save

对 _config.yml 进行配置

1
2
3
4
5
6
deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/hexojs/hexojs.github.io
  # 其实就是仓库的 clone 的链接
  branch: master

然后一行代码部署

1
hexo d

具体使用步骤

  1. hexo new 新建一个文章
  2. 肝文章
  3. hexo g 生成静态网站
  4. hexo s 预览文章
  5. 文章有问题，goto 2
  6. hexo d 将文章推送到 GitHub 上

各种自定义操作 (不定时更新)

修改主题

修改很简单，用 NexT 来作为例子

下载主题包

定位到 you_site_folder/themes，把包放到这个目录

1
2
cd you_site_folder/themes
git clone https://github.com/iissnan/hexo-theme-next next

配置

编辑 _config.yml 文件，找到 theme 字段，修改值为包的文件夹名字

1
theme: next

建议先清除掉原有的静态站点的文件

1
hexo clean

然后重新生成预览网站

NexT：主页不显示全部文章

目前有三个方法

  1. 文章中在自己喜欢的地方加入 <!-- more -->，手动截断。

  2. 在 front-matter 添加 description，提供摘录

  3. 让主题自己生成摘要，在主题根目录 _config.yml 文件种添加

    1
    2
    3
    auto_excerpt:
      enable: true
      length: 150  # 截断字符长度

推荐使用第一种方式

使用腾讯云域名解析给网站一个域名

完成备案后访问腾讯云的域名解析列表，选择需要解析的域名。

添加下面两条记录，记录类型使用CNAME

主机记录 记录类型 线路类型 记录值
@ CNAME 默认 托管在Github上的页面域名
www CNAME 默认 托管在Github上的页面域名

在站点源码处，创建文件 sourec/CNAME，在里面填写备案的域名，完成后重新生成静态文件并推送即可