搭建博客

基于 Hexo 搭建静态博客网站，使用 ICARUS 主题，并部署在 Github Pages 上。

在 Github 创建网站

参考 GitHub Pages 快速入门

在 Github 创建一个带有自己用户名的仓库 username.github.io, 例如 siyouluo.github.io.
然后在该仓库下新建一个 index.html 文件

index.html

hello world

稍等片刻, 即可访问 https://siyouluo.github.io 打开网站。

具体的网址可以在仓库的 Settings -> Pages -> GitHub Pages 页面看到: Your site is live at <some url>.

自定义域名 (可选)

GitHub Pages 提供的域名是用户名后跟着 .github.io, 如果自己有域名, 可以使用自己的域名来访问该网站.

1. 登录自己的域名管理页面 (例如腾讯云域名解析 https://console.dnspod.cn/dns/), 添加两条记录, 其中 @ 主机的记录值是通过 ping siyouluo.github.io 显示出来的 ip 地址.

   主机记录	记录类型	记录值
   @	A	185.199.111.153
   www	CNAME	siyouluo.github.io

   补充
   实际上, 通过 ping 得到的 ip 地址总是在如下四个地址之间变动, 在进行域名解析时可以添加四条 A 记录, 分别指向四个 ip.
   实测中, 至少需要有一条 A 记录指向如下之一的 ip 地址即可.

   ping siyouluo.github.io

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153

   参考 Managing a custom domain for your GitHub Pages site

2. 在 Github 仓库 Settings -> Pages -> GitHub Pages: Custom domain 填入自己的域名 (例如 luosiyou.cn), 并等待域名解析完成后, 勾选 [√] Enforce HTTPS, 等待片刻后, 该页面上方将更新网站的地址: Your site is live at https://luosiyou.cn/.

3. 此时将发现 Github 仓库下多了一个 CNAME 文件, 事实上我们也可以在仓库中手动添加这个文件来启用自定义域名

   CNAME

   luosiyou.cn

使用 Hexo 搭建网站

参考 Hexo 文档

1. 安装 Git

2. 访问 https://nodejs.org/en/download/ 下载 node.js, 双击 node-v16.18.0-x64.msi 文件安装, 默认下一步, 并勾选 [√] Automatically install the necessary tools.;

3. 启动终端运行如下指令, 查看安装是否成功

   > node -v
   > npm -v

   运行示例 >folded

   PS C:\Users\siyou> hexo -v
   hexo-cli: 4.3.0
   os: win32 10.0.22000
   node: 16.18.0
   v8: 9.4.146.26-node.22
   uv: 1.43.0
   zlib: 1.2.11
   brotli: 1.0.9
   ares: 1.18.1
   modules: 93
   nghttp2: 1.47.0
   napi: 8
   llhttp: 6.0.10
   openssl: 1.1.1q+quic
   cldr: 41.0
   icu: 71.1
   tz: 2022b
   unicode: 14.0
   ngtcp2: 0.8.1
   nghttp3: 0.7.0
   PS C:\Users\siyou> npm -v
   8.19.2

   注意
   在 Windows Terminal 内可以使用 cmd 或 PowerShell 运行
   而在 PowerShell 中执行时, 可能会报错 无法加载文件，因为在此系统中禁止执行脚本，此时以管理员身份打开 PowerShell 并修改执行策略即可

   Windows PowerShell

   > Set-ExecutionPolicy RemoteSigned 

4. 安装 Hexo

   > npm install -g hexo-cli
   > npm install hexo-deployer-git --save # 用于网站部署

5. 建站
   执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

   > hexo init <folder>
   > cd <folder>
   > npm install

   新建完成后，指定文件夹的目录如下：

   .
   ├── _config.yml
   ├── package.json
   ├── scaffolds
   ├── source
   |   ├── _drafts
   |   └── _posts
   └── themes

   各文件及文件夹用途可以参考 Hexo 建站

   示例

   PS D:\Data> hexo init hexo-icarus-pages
   INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
   INFO  Install dependencies
   INFO  Start blogging with Hexo!
   PS D:\Data> cd .\hexo-icarus-pages\
   PS D:\Data\hexo-icarus-pages> npm install
   
   up to date, audited 240 packages in 1s
   
   22 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities

6. 自定义域名 (可选)
   如果前面配置了自己的域名, 那么在下一步部署之前, 先在 source/ 文件夹下添加 CNAME 文件,
   否则部署上去之后, Github 仓库内本来存在的该文件会被删去, 导致域名解析失效.

   CNAME

   luosiyou.cn

7. 修改配置文件
   编辑 _config.yml 配置文件

   _config.yml

   # Deployment
   ## Docs: https://hexo.io/docs/one-command-deployment
   deploy:
     type: git
     repo: https://github.com/siyouluo/siyouluo.github.io.git
     branch: master

8. 个性化配置
   修改 _config.yml 配置文件中的 title, author, url, permalink 等配置项
   具体各配置项含义参考 https://hexo.io/zh-cn/docs/configuration

9. 生成博客并部署到 Github Pages

   > hexo clean # 清除上一次生成的静态网站文件, 可简写为 hexo c
   > hexo generate # 生成静态网站, 可简写为 hexo g
                   # 参考 https://hexo.io/zh-cn/docs/generating
   > hexo server # 在本地启动 hexo 服务, 可通过 http://localhost:4000 预览网站, 
                 # 并且修改源文件后刷新浏览器会自动更新页面
                 # 可简写为 hexo s
                 # 参考 https://hexo.io/zh-cn/docs/server
   > hexo deploy # 将 public/ 文件夹下的静态网站部署到 Github, 可简写为 hexo d
                 # 参考 https://hexo.io/zh-cn/docs/one-command-deployment

10. 创建新的博客文章
    初始化站点时, 存在一个默认的 source/_posts/hello-world.md 文件可以生成第一条博客,
    后续如果需要创建新的博客, 使用如下命令.

    > hexo new "My New Post" # 参考 https://hexo.io/zh-cn/docs/writing

11. 在主页中仅显示文章的一部分. 参考 Hexo 文档 >> 标签插件 >> 文章摘要和截断

12. 创建草稿与发布

    > hexo new draft <title> # 创建一个草稿
    > hexo publish draft <title> # 将草稿发布到 post

使用 ICARUS 主题

1. 安装 icarus 主题

   > npm install -S hexo-renderer-inferno
   > git clone https://github.com/ppoffice/hexo-theme-icarus themes/icarus

2. 使用 hexo 命令修改主题为 Icarus

   > hexo config theme icarus

3. 生成站点

   > hexo c
   > hexo g
   > hexo s

4. 个性化配置
   1. 修改 _config.icarus.yml 文件, 例如更改其中某些链接, 注释掉一些不需要的组件
   2. 更换图片: themes/icarus/source/img/
   3. 图标: http://www.fontawesome.com.cn/faicons/
   4. 目录粘性定位: Icarus 主题自定义 >> 目录粘性定位
   5. 添加 latex 支持: 在_config.icarus.yml 文件中设置 mathjax: true

参考链接

• Hexo 官方文档
• Hexo Github 仓库
• Icarus 快速上手
• Hexo 插入代码块
• 改图鸭 照片变漫画
• icarus 个性化配置
• MathJax 数学公式