部署博客和优化配置

本文最后更新于：7 个月前

部署博客

部署方式一 部署到GitHub Pages

  • 搭建好开发环境相关的工作， 涉及如下（细节不赘述，网上可以检索到相关的搭建教程），仅供参考 hexo安装配置教程

    • npm
    • Git ，Git Bash 以及 Git SSH 配置
    • 安装 Hexo

  • 注册好GitHub 账号，接着创建一个公开仓库（public）并且以 username.github.io 命名仓库

    • 这样写的原因是，需要通过域名 https://username.github.io 来访问你的网站；如果仓库取了其他名字，最后访问的域名会是：https://username.github.io/仓库名

  • 通过命令行安装Fluid主题

  • 修改博客项目根目录下的config.yml 这是整个博客的全局配置文件，找到如下字段并修改

1
2
3
4
5
6
7
8
9
10
11
12
13
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://username.github.io
permalink: :category/:title/
permalink_defaults:
···
···
deploy:
  type: git
  repo: [email protected]:username/username.github.io.git
  #仓库地址
  branch: master
  message:
  • 修改好后，在博客项目的根目录下打开cmd命令行/Git Bash，并执行 
1
2
hexo clean&&hexo g&&hexo deploy
# 清除缓存并重新生成静态文件，然后部署到GitHub Pages
  • 通过username.github.io 域名来访问你的网站，完成部署

部署方式二：部署到阿里云服务器 （暂时不写，但是本人先实现的部署方式）

配置优化拓展

CDN加速访问静态资源

  • 更换域名，可通过各主流运营商购买，我购买的是阿里云的域名，而且作为学生购买域名费用极低

    • 注册阿里云账户并去购买域名（不赘述）
    • 打开控制台，找到域名这一功能，进入域名解析，需要将域名指向自己博客的IP地址
1
2
# 通过Windows 命令行 输入一下命令，查找你网站的IP地址
ping username.github.io
  • 然后找到 解析设置 ，并添加记录
    • 主机记录：@；记录类型：A；记录值为 GitHub Pages 域名的 IP,，即 你ping到的IP地址。（@表示域名前面的前缀是泛指的）
    • 主机记录：www；记录类型：CNAME；记录值为 GitHub Pages 域名，即 username.github.io （这里相当于把你的域名设置成了username.github.io的别名）
    • CNAME可以将多个访问地址映射对应同一个IP地址，在这里也就实现了既可以通过你的 username.github.io来访问你的网站，也可以通过你指定的新域名来访问你的网站

  • 这里进行一些概念解析：

    • A记录，即Address记录，它并不是一个IP或者一个域名，我们可以把它理解为一种指向关系：

      域名 www.xxx.com → 1.1.1.1 （IP地址）
      主机名 DD → 2.2.2.2
      也就是当你访问这些域名或者主机名的时候，DNS服务器上会通过A记录会帮你解析出相应的IP地址，以达到后续访问目的。所以A记录是IP解析，直接将域名或主机名指向某个IP。是能够访问网站的最根本方法

    • CNAME，也称为别名记录，咱们可以理解为给同一个网站地址取不同的访问地址，有如下的指向关系

      • www.wnb.com → www.xxx.com → 1.1.1.1
      • www.lbj.com → www.xxx.com → 1.1.1.1
      • www.kkk.com → www.xxx.com → 1.1.1.1

    • 那么CNAME有何用，仅仅是取个别名吗，非也，当服务器IP地址修改时，仅需通过A记录修改就能保证CNAME的正常运行，显然比你每个别名都直接指向 1.1.1.1 更加方便兼容

    • 这仅是一方面，另一方面，CNAME结合CDN加速的原理能够极大的提高网站访问的速度（在不同地区，国内国外，访问一个网站速度因为服务器的关系会不同，因此需要CDN加速） 详细解析参考 简单的解释下什么是CNAME？
  • 在路径 博客项目根目录/source 下新建一个 CNAME 文件，里面填写我们买的域名，注意文件不需要任何后缀。
  • GitHub 中打开对应仓库，在 Setting 中找到 Pages，在Custom Domain 处设置为新买的域名，旁边的一个 Enforce HTTPS 勾选后将为网址添加https前缀
  • 路径 博客根目录/_config.yml 的#URL 部分，更改为新域名即可。

部署至CloudFlare，CDN加速

  • 注册 CloudFlare 账号
  • 找到Pages选项，创建项目连接GitHub，之后选择自己的博客仓库，接着选项按默认点击即可，最后创建项目，等待几分钟完成
  • 左侧找到网站选项，添加网站域名，选择 Free 免费版本，将会自动扫描你以往使用 cloudflare的DNS解析记录，如没有则会发现记录是空的，点击继续即可
  • 根据提示将你当前的DNS解析服务器转移至cloudflare，我用的是阿里云服务器，因此打开阿里云控制台，找到DNS修改功能，进行修改

修改DNS

  • 点击完成，检查更新，需要等待几分钟，待接收到邮件通知 active
  • 添加CloudFlare的DNS记录，像先前在阿里云控制台出添加DNS解析记录一样的操作；至于原本阿里云的DNS解析，可以删掉了，无影响
  • 测试更新项目文件后再次部署到云端，网站的更新速度

永久链接，优化路径搜索

永久链接

  • 要使用 :category/:title/ 这种格式设置；在 _config.yml 下 找到Permalinks 设为 :name/，这样便在url地址栏中直接显示该文章的文件名
    • 注意，该设置修改后，需要重新部署 在 命令行 hexo clean&&hexo g&&hexo deploy

添加网站地图，百度/谷歌收录

  • 打开 百度搜索资源平台 ，登录百度账号找到用户中心->站点管理，验证身份后添加你的网站 （注意不要用Edge浏览器，会被百度服务器拦截，改用谷歌浏览器即可）；
  • 添加谷歌收录，打开 Google搜索提交入口，选择第二种网址前缀 按格式输入你的网址
  • 选择验证网站方式，百度和谷歌收录都选择【HTML标签验证】，/themes/fluid/layout/_partial/head.ejs 文件，将验证标签放入 <head>...</head> 中
1
2
3
4
5
<head>
    <meta name="baidu-site-verification" content="code-xxxxx" />
    <meta name="google-site-verification" content="xxxxxxxxx" />
    <!-- 每个网站不同，自己复制自己的即可-->
</head>

  • 重新部署至云端，然后等待几分钟，点击验证成功

  • 提交搜索后，可以选择添加站点地图使搜索引擎更智能地抓取内容：

    • 在博客目录下打开 Git Bash/cmd，输入如下命令安装：
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
  • 打开 博客根目录/_config.yml，在最下方添加如下字段：
1
2
3
4
5
# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

  • 重新部署后，等待数分钟。

  • 打开刚才验证网站的页面，找到 sitemap 相关字样，输入：

    • 百度：https://hwcoder.top/baidusitemap.xml
    • 谷歌：https://hwcoder.top/sitemap.xml

    完成以上内容后，静待两个搜索引擎收录，其他搜索引擎（bing，sougou等）同理，在搜索引擎中输入 site:你的域名 就可以实时查看收录结果，不过谷歌的收录需要等待一定时间（貌似7天）

使用Picx图床

  • 管理和载入图片资源
  • 打开 Picx ,按照使用教程来配置，就可以在博客中引用图片资源了
增加Latex 公式语法支持，需要更换Markdown渲染器（hexo自带的渲染器不支持完善的latex语法）
  • 使用@upupming/hexo-renderer-markdown-it-plus 插件
    • 卸载原来的渲染器，安装新的插件
1
2
3
npm uninstall hexo-renderer-marked --save 
# 这是卸载自带的渲染器（如果已更换为别的，请对应修改）
npm install @upupming/hexo-renderer-markdown-it-plus --save
  • 安装好之后，仅需修改根目录下的_config.yml或_config_fluid.yml文件，后者是采取了自定义修改主题全局设置增加的文件，实际上就是起到了原来的_config.yml的作用，但是这样做更安全，进行如下修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#Markdown config
markdown_it_plus:
  render:
    html: true            
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-katex #使用支持katexc的插件
  anchors:  
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSide: 'left'
    permalinkSymbol:

  • 各参数解释可参考 更换hexo markdown渲染

  • 使用Mathjax插件，有这些优点：对 LaTeX 语法支持全面，且右键点击公式有扩展功能菜单。参考文章Hexo配置与扩展

    • 但是 Hexo 中会对一些字符转义，使得用 MathJax 渲染公式有时会出错，根据 GitHub 上的 Issue，需要找到路径 node_modules\kramed\lib\rules\inline.js，修改：
1
2
3
4
5
6
7
8
9
//第11行：取消对 \ 和 {} 的转义 escape
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,
//第20行：避免下划线 _ 被转义为斜体，而非 LaTeX 下标
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
//第64行：避免反斜杠加竖线 \| 被转义为 |，而非 LaTeX 双竖线
escape: replace(inline.escape)('])', '~|])')(),
escape: replace(inline.escape)('])', '~])')(),

  • 在使用数学公式时，应当避免使用两个连续的 {}，否则会被 Hexo 解释为特殊标签，从而报错。

  • Hexo 对公式的支持不如 Typora 好，譬如多行公式需要用 \begin{aligned} ... \end{aligned}，换行符 \\ 和定位符 &。

  • Hexo 中变量的上下标只能用 LaTeX 实现而不能用 Enhanced Markdown 语法。

  • 行内公式、公式块里的联立公式，如果含有分数或者大运算符（如求和），需要用 \begin{aligned} ... \end{aligned} 夹住，否则会被渲染器压扁。

  • 公式块内如果一行有多个式子，间隙可能会被压缩，需要用 \quad 分隔。

技术拓展 博客部署
创新优化 Web-Dev

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