我的一小步 | 如何搭建私人博客

七月 20, 2021 8412

个人博客建站的四步走，外加进阶设置的彩蛋。

Hexo简介

Hexo是一款基于Node.js的静态博客框架，快速、简洁且高效，支持markdown语法。

step0：准备环境

准备git、node.js环境

git官网：https://git-scm.com/downloads
Node.js官网：https://nodejs.org/en/download/

Windows环境配置：使用 Node.js 官方安装程序时，需要确保勾选 Add to PATH 选项（默认已勾选）

如已完成安装，可通过如下命令验证：npm -v、 git -v

step1：本地安装Hexo

使用命令行，一键安装

1	`npm install -g hexo-cli`

step2：初始化并验证Hexo

初始化当前文件夹并生成必要文件

1 2	`hexo init npm install`

生成的文件夹结构如下

.  
├── _config.yml  //网站配置信息
├── package.json  //安装包的版本信息记录
├── scaffolds  //模板文件夹
├── source  //资源文件夹
|   ├── _drafts  //草稿文件夹，不会被解析打包到`public`文件夹里
|   └── _posts  //文章文件夹，可在此新建`.md`文章
└── themes  //主题文件夹

三连生成Hexo预览

hexo clean  //先清扫下，此时`public`文件夹内的内容会被清除
hexo g  //generate 生成静态网页文件
hexo clean && hexo g  //上面两步也可并成一步
hexo s  //server 本地服务端
hexo d  //deploy 部署命令

在浏览器地址栏输入localhost:4000，即可本地预览Hexo博客界面啦~

step3：部署到GitHub

👀要想实现其他小伙伴通过一根网线访问你的博客，有两种办法。
一是部署到服务器，再通过DNS解析到服务器即可；
二是借助Severless服务，在代码托管网站上托管自己的静态页面。
根据是否有自己的服务器做选择。

更多Severless服务的相关内容，可见👉Serverless | 技术分享

这里介绍托管到Github平台的方法：

确认自己已注册Github账户
新建仓库：<username>.github.io
留意仓库的分支，是master还是main，后面配置GitHub deploy会用到
测试是否成功：仓库内新建index.html文件，随便写入内容，浏览器输入地址<username>.github.io访问，如出现写入的内容则畅通了
安装git部署的插件hexo-deployer-git，并配置git密钥

1
2
3

cd /c/Users/<username>/.ssh  //Windows下SSH密钥的路径，用`Git Bash`打开
cat ~/.ssh/id_rsa.pub  //获取本地Git的SSH公钥
ssh -T git@git.com  //确认并添加主机到本机SSH可信列表

之后将密钥的内容复制到GitHub的SSH Keys即可

如本机无git密钥，可通过以下路径生成：

1
2
3

git config --global user.name "用户名"
git config --global user.email "邮箱地址"
ssh-keygen -t rsa -C "上面的邮箱"

把网页部署到GitHub平台：打开根目录的config.yml文件，定位到deploy: ，写入GitHub的部署路径

deploy:
  type: git
  repo:
      github: git@github.com:<username>/<username>.github.io.git,main

step4：开始写作

Hexo支持markdown语法写作，写文章的方法有两种：

使用命令创建文章：hexo new <filename>
在文件夹./source/_posts内新建<filename>.md文件

特别注意：文件夹./public是GitHub的同步文件夹，每次Hexo三连都会被覆盖、更新，勿在此文件夹内新建任何文件！！（别问我是怎么知道的🤣🤣）

进行到以上四步，基本可以实现发布博客的功能了。如要进阶的操作，可继续往下阅读。

P.S 因为众所周知的原因，国内访问GitHub不便，网络有时也不畅通，所以建好站后多半还访问不了，详见step7

进阶操作

step5：美化你的网站

Hexo上现有300+的主题，推荐主题zhaoo（本站建站初使用的主题即是zhaoo），可根据自己的需求调整为喜欢的风格

安装主题

1
2
3

hexo clean  //先清扫下
git clone git@github.com:zhaoo/hexo-theme-zhaoo.git themes/   
//把GitHub上的主题文件夹克隆到本地themes文件夹内

启用主题
打开根目录的_config.yml文件，定位到theme: 栏，把值改为zhaoo，注意冒号后需一个空格，否则会报错

更新主题

1 2	`cd themes/zhaoo git pull //从GitHub获取更新`

修改主题
详见👉step9

小技巧分享：
在根目录新建_config.<主题名>.yml文件（如_config.zhaoo.yml），可对主题的配置进行更改，其被执行的优先级高于主题文件夹内的_config.yml文件

step6：绑定自己的域名

绑定域名分三步走：

前往域名绑定的DNS解析服务商处
把需要绑定的字段（如blog.wuzhiping.top）用CNAME的方式转发到GitHub生成的连接（<username>.github.io）
GitHub也需要设置，路径为Settings-Pages-Custom domain，把上面的链接填入

注：按上述方法，GitHub会自动帮你在根目录创建一个CNAME文件，但每次hexo d部署后，文件会被清除，因此，这里的做法是在本地文件夹的根目录新建一个CNAME文件，内容写你填入的网址，如blog.wuzhiping.top

step7：实现国内的顺畅访问

秘密武器就是Coding平台
Coding目前已被腾讯收购，开发者可免费使用代码托管、开发协作等功能。

Coding是一个面向开发者的云端开发平台,提供 Git/SVN 代码托管、任务管理、在线 WebIDE、Cloud Studio、开发协作、文件管理、Wiki 管理、提供个人服务及企业版本的服务。

——官网介绍

导入设置的路径是新建项目-代码仓库-创建代码仓库-导入外部仓库，把GitHub的仓库导入进去
和GitHub类似，添加SSH Key，通过命令ssh -T git@e.coding.net测试是否通过
修改站点_config.yml配置文件，加入coding的代码

deploy:
  type: git
  repo:
      github: git@github.com:<username>/<username>.github.io.git,main
	  coding: git@e.coding.net:<username>/<projectname>/<reponame>.git,master

部署Hexo静态网页文件

Hexo一键三连见step2
此时Coding会自动部署，可在仓库的网站托管页面看到给定的网址（很长，建议绑定自己的域名）
配置Coding（背后的腾讯云）提供的CDN服务，实现国内的加速访问，前六个月免费体验

🎊小彩蛋：
此外，还有Vercel、Cloudflare Pages等平台（Gitlab也可部署，缺点是必须是登录用户才能访问生成的网页，不推荐使用；Gitee 码云也可托管，Pages功能目前处在整顿期），部署的过程类似于Coding
国内CDN另一个选项是又拍云，加入又拍云联盟，每月纵享15G流量，还是很香的…

step8：异地备份源文件

hexo d的机制是把编译后的静态页面上传到代码托管网站，不包含源文件，因此，为了文件备份，也为了方便远程编译，可以利用git的不同分支管理源文件。

在GitHub上新建分支source，确认已配置本地的SSH Keys
本地git库的操作

git init  //初始化本地仓库
git remote add origin <仓库地址>  //把本地仓库和远程仓库相连接
git branch -m <old_branch> <new_branch>  //修改本地分支
git checkout <new_branch>  //确认本地的分支

同步远程仓库

1
2
3

git add .  //选中所有改动的文件（夹）
git commit -m 'several words'  //提交并文字说明所做的改动
git push origin source  //将本地仓库推送到远程的<source>分支

step9：小插曲

参照zhaoo的主题配置文档以及Hexo官方文档进行个性化设置
同时，增加了以下几点的内容。

引入`iconfont`阿里巴巴矢量图标库

新建项目➡把中意的图片加入到我的项目➡复制Font class代码➡在主题的配置文件找到css导入➡把网址如图存放进去，完成导入。

引入iconfont的css源

以后就可以直接用iconfont项目内的图标了，还可以自定义图标的颜色~

1	`<i class="iconfont icon-youpaiyun_grey" style=""transform:scale(2,2);color:#00A0FF;"></i>`

安装博文压缩插件`hexo-neat`

1	`npm install hexo-neat --save`

同样在_config.<themename>.yml中修改配置，具体配置可参考👉rozbo/hexo-neat

设置首页背景图为轮播

原理是引入unsplash的图片源进行轮播，每次打开都是新的背景图。

修改主题配置文件_config.<themename>.yml,定位到preview，修改api: 的内容

1	`api: https://source.unsplash.com/random/1920x1080`

修改页脚内容及排版

找到主题的布局文件夹，编辑页脚源文件：…\layout_partial\components\footer.ejs，从<footer class="footer">那一行起，依次增加了项目支持、网站访问统计、CC协议图标的内容

点击查看代码


    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!---cc-icons代码引入--->
<link rel="stylesheet" href="/css/cc-icons.min.css" type="text/css"  />
<!---cc-icons代码引入--->
<!---busuanzi代码引入--->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!---busuanzi代码引入--->
<!---fontawesome代码引入--->
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!---fontawesome代码引入--->
<%
  var socialList = '';
  for (var i in theme.social) {
    var arr = theme.social[i].split('||');
    var url = arr[0];
    var iconfont = arr[1];
    var color = arr[2] || theme.color.link;
    socialList +=
      `<a
        href="${url}"
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=${color}"
        onMouseOut="this.style.color='${theme.color.text}'">
          <i class="iconfont ${iconfont}"></i>
      </a>`;
  }
%>
<footer class="footer">
  <div class="footer-social"><%- socialList %></div>
  <% if (theme.copyright) { %>
    <div class="footer-copyright"><%- theme.copyright %></div>
  <% } %>
<!---添加项目支持--->
  <p>
    <div align="center">
    基于 <a target="_blank" href="https://hexo.io">Hexo</a> & Theme.<a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a>&nbsp|&nbsp<a rel="upyun" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" p-id="38"><img src="/images/icons/upyun_logo8.png" width="10%" height="10%" style="transform:translateX(-2px);position:relative;margin-bottom:2px;" title="又拍云CDN"></a>加速支持
    </div>
  </p>
<!---添加项目支持--->
<!---网站访问统计--->
  <p>
    <div align="center">
    <i class="iconfont icon-eye"  aria-hidden="true"></i>
    <span id="busuanzi_value_site_pv">
      <i class="fa fa-spinner fa-spin" aria-hidden="true">
      </i>
    </span>&nbsp&nbsp&nbsp
      <i class="iconfont icon-user"  aria-hidden="true"></i>
      <span id="busuanzi_value_site_uv">
        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
      </span>
    </div>
  </p>
<!---网站访问统计--->

<!---添加CC协议--->
  <div align="center">
    <a target="_blank" title="CC协议"href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">
      <i class="cc cc-by-nc-sa" aria-hidden="true" style="font-size:36px;"></i>
    </a>
  </div>
<!---添加CC协议--->
</footer>

尚待解决

本条目记录尚待解决的问题。

自定义摘要内容，在页面md文档的Front-matter自定义description: ，无效。
Note: 通读主题的模板配置源文件，发现解决方式为在Front-matter中新增excerpt: 的内容
调整页面大小，试过了调整主题配置的post_page_size: ，无效
去除页脚的微信图标，试过删除主题配置文件的微信图标代码，无效

Ref

Changelog

210720 搭建文章框架，完成初稿
210729 扩充网站搭建的基础部分
210730 扩充进阶部分的内容，发布完整版

本文作者：米斯特乌
文章标题：我的一小步 | 如何搭建私人博客
本文链接：https://m.wuzhiping.top/p/ddb3eb57.html
版权声明：博客内容采用 BY-NC-SA 4.0 许可协议，转载请注明出处！

查看评论