搭建个人网站

发表于 分类于 评论数：

对我来说，个人网站，即使只有我自己看，我也想把它打扮得漂漂亮亮的，把自己喜欢的东西放上去。搭建个人网站需要考虑的东西还是挺多的。首先，建设和维护的成本要低，用户访问的速度要快，我的方案是使用国外免费的网站托管服务，通过国内的云服务商提供的CDN服务加速。其次，网站要简洁，可以自由地加东西。我使用过Jkeyll，但是觉得它可自由改动的地方太少了，最后选择了Hexo。Hexo有很多主题，我尝试过Stellar，但是觉得它不够简洁，最后选择了Next。最近参考了 班班 的博客重新设计了自己的博客，打算写个总结。

1. 域名解析

考虑到访问速度和运营成本，本站使用了 GitHub、Vercel、Cloudflare、又拍云四家公司提供的服务。GitHub存储网站的源码，Vercel提供网站托管服务，Cloudflare提供域名解析服务，又拍云提供CDN服务。

1.1 GitHub

创建一个名为shaoyaoqian.github.io的仓库，source分支存储网站源码，main分支存储网站的静态文件，源码通过GitHub Action生成静态文件。

1.2 Vercel

  1. 登陆Vercel，进入控制台，点击 Add new...->project 创建项目
  2. 选择网站的代码仓库，点击import导入代码
  3. 配置项目，填写合适的项目名，点击Deploy部署 导入GitHub仓库 填写项目名
  4. 部署完成后，点击 Add Domain 添加域名
  5. 填入自定义域名，点击 Add（此处有一个Vercel分配的默认域名： shaoyaoqian-github-io-2enj.vercel.app，此域名可以访问网站） 添加域名
  6. 添加自定义域名后，Vercel会提供一个CNAME的值 等待域名解析

1.3 Cloudflare

在域名解析处将Vercel提供的CNAME填入。图中示例为Cloudflare提供的域名解析服务，阿里云等其他域名解析服务商的设置也是类似的。 添加域名解析

1.4 又拍云

国内用户访问网站需使用国内云服务商提供的CDN加速服务，本站使用的是又拍云加速。 1. 创建CDN服务 创建CDN服务 2. 修改cloufare的解析 又拍云提供的CNAME 修改Cloudflare的域名解析

1.5 网站测速

  1. lighthouse
    lighthouse https://www.example.com --view
  2. https://www.itdog.cn/http/

2. Hexo

2.1 环境配置

提示

npm需要配置国内源

要使用 Hexo NexT 主题的博客，需要先安装 Node.js 和 Git。在MacOS中可以通过homebrew安装

brew install npm

安装完成后，修改软件源，然后再在终端中输入命令安装 Hexo：

npm config set registry https://registry.npm.taobao.org
npm install -g hexo-cli

安装 Hexo 完成后，执行下列命令会在指定文件夹中新建所需要的文件：

# 在指定文件夹中初始化 Hexo
hexo init <folder-path>

# 定位到 Hexo 博客目录
cd <folder-path>

# 安装依赖包
npm install

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

  • _config.yml 站点配置文件，具体配置的说明可以查看相关 文档。
  • source 文件夹是存放用户资源的地方，Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被复制过去（如 CNAME 文件）。

2.2 新建文章与页面

使用以下第一句可以在 source/_post/ 文件夹下新建一篇文章；使用以下的第二句可以在 source 下新建以 <page-title> 为名称的文件夹，文件夹内的 index.md 可以在编译后生成一个新的页面。

# 新建文章
hexo new "<post-title>"

# 新建页面
hexo new page "<page-title>"

因为原始的都是 Markdown 文件，要让浏览器可以显示美观的网页，需要根据 Markdown 文件生成 HTML 静态文件。执行以下命令：

# 生成静态文件，或者 hexo g
hexo generate

在某些情况，如果发现对站点的更改无论如何也不生效，可能需要运行该命令，清除缓存文件 db.json 和已生成的静态文件 /public/。

hexo clean

2.3 本地预览调试与部署网站

要在本地预览调试生成的博客网页效果，可以执行以下命令。访问网址为：http://localhost:4000/。

hexo serve

如果是部署在 GitHub Pages，可以按照下述命令配置站点配置文件（注意缩进保持一致）：

# Deployment
deploy:
  - type: git
    repo: https://github.com/<github-username>/<github-repo-name>.git
    branch: <github-repo-branch>

设置完成后，执行以下命令。第一次执行过程中会提示输入相应用户名和密码，正确输入后既可以正常部署。

# 首次部署要先执行以下命令安装插件
npm i hexo-deployer-git --save

# 部署网站
hexo deploy

在两条命令直接采用 && 进行连接即可同时执行两条命令。另外，使用以下的命令可以简化命令的使用：

# 启动服务器之前预先生成静态文件，等价于 hexo g && hexo s
hexo s -g

# 静态文件生成后立即部署网站，等价于 hexo g && hexo d
hexo g -d

2.4 GitHub Actions自动部署（TODO）

  1. 添加密钥
  2. 修改main.yml文件

3. 博客主题自定义

3.1 修改主题

执行以下命令安装主题。

npm install hexo-theme-next --save

主题安装后，打开博客根目录下的站点配置文件（/_config.yml），找到 theme 键值，将值修改为 next 。

3.3 404页面

要生成一个和主题样式一致的404页面，首先需要新建一个页面：

cd <blog-path>
hexo new page "404"

编辑该页面的 Markdown 文件为以下内容，正文部分可以自行编辑内容。其中 permalink: /404 表示将该文件解析生成的 HTML 文件永久链接设置为 /404，这样就可以让访客访问错误链接时看到这个页面了。

---
title: 404 Not Found
comments: false
permalink: /404
---

3.4 文章永久链接

这里使用插件 hexo-abbrlink 来生成博客文章的永久链接，可以查看该插件的 GitHub 项目页面。

cd <blog-path>
npm i hexo-abbrlink

在站点配置文件中修改 permalink：

- permalink: :year/:month/:day/:title/
+ permalink: posts/:abbrlink/
+ abbrlink:
+   alg: crc32  #support crc16(default) and crc32
+   rep: hex    #support dec(default) and hex

3.5 文章置顶

首先替换给文章排序索引的原有插件 hexo-generator-index，执行以下命令

npm uni hexo-generator-index && npm i hexo-generator-indexed

然后在需要置顶的文章的开头添加 sticky: true 控制文章置顶：

3.6 Waline评论（废弃）

  1. 自建mysql数据库并开放端口

    测试数据库连接

    import pymysql
# 打开数据库连接
db = pymysql.connect(host='x.x.x.x',
                     user='debian-sys-maint',
                     port=3306,
                     password='xxxxxxxxx',
                     database='waline')

# 使用 cursor() 方法创建一个游标对象 cursor
cursor = db.cursor()
# 使用 execute()  方法执行 SQL 查询，获取数据库版本
cursor.execute("SELECT VERSION()")
# 使用 fetchone() 方法获取单条数据.
data = cursor.fetchone()
print(data)
# 关闭不使用的游标对象
cursor.close()
# 关闭数据库连接
db.close()
  2. docker 后端
  3. Nginx 管理器 Nginx 管理器
  4. 使用img.ink图床，开启评论区图片上传
  5. 文章列表显示文章阅读量和评论数量

3.7 Artalk评论(TODO)

3.8 相册

Facybox 和 Justified Gallery

冬天的绣球花
这是一段很长很长的文字
3711669695359_.pic
3701669695359_.pic
3691669695359_.pic
3681669695359_.pic
3671669695359_.pic
3661669695359_.pic
3651669695359_.pic
3641669695359_.pic
3631669695359_.pic
3621669695359_.pic
3611669695358_.pic
3601669695358_.pic
3591669695358_.pic
3581669695358_.pic
3571669695358_.pic
3561669695358_.pic

3.9 Latex 公式

参考Next主题的文档，使用Katex渲染公式。先更换markdown解释器，再修改配置文件。

npm un hexo-renderer-markdown-it
npm i hexo-renderer-markdown-it-plus --save
_config.next.yml
math:
  every_page: false
  katex:
    enable: true
    copy_tex: false

3.10 Pjax

有时候页面跳转，只需刷新网页的一部分，不需要重新加载整个网页，pjax功能使得浏览器可以进行这样的操作。开启pjax功能后，自行添加的Javascript脚本需要加上data-pjax属性，确保页面跳转后脚本文件会重新执行。

<script data-pjax src="/main.js"></script>

3.11 Chart.js 绘制图表(临时使用)

借助 Chart.js 实现强大的图表绘制功能。目前可以在文章中加入div块，根据div块的id修改main.js中的相应代码来实现图表绘制的功能。
<div>
  <canvas id="myChart"></canvas>
</div>

3.12 地图插件

(尚未实现) https://jvectormap.com/tutorials/getting-started/

4. MarkDown 参考

4.1 上下标

19^th^
H~2~O

19th H2O

4.2 下划线/插入

++Inserted text++

++Inserted text++

4.3 段首空两格

<!-- 段首空两格 -->{% indent %}

4.4 脚注

Footnote 1 link[^firstaa].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^firstaa]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

Footnote 1 link1.

Footnote 2 link2.

Inline footnote3 definition.

Duplicated footnote reference4.

5. 提示卡片

{% note %}
#### Header
(without define class style)
{% endnote %}

(without define class style)

{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

Default Header

Welcome to Hexo!

{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Primary Header

Welcome to Hexo!

{% note info %}
#### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Info Header

Welcome to Hexo!

{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Success Header

Welcome to Hexo!

{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Warning Header

Welcome to Hexo!

{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Danger Header

Welcome to Hexo!

{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
{% endnote %}

No icon note

Note without icon: note info no-icon

{% note primary This is a summary %}
#### Details and summary
Note with summary: `note primary This is a summary`
{% endnote %}

This is a summary

Details and summary

Note with summary: note primary This is a summary

{% note info no-icon This is a summary %}
#### Details and summary (No icon)
Note with summary: `note info no-icon This is a summary`
{% endnote %}

This is a summary

Details and summary (No icon)

Note with summary: note info no-icon This is a summary

  1. Footnote can have markup

    and multiple paragraphs.↩︎

  2. Footnote text.↩︎

  3. Text of inline footnote↩︎

  4. Footnote text.↩︎