我的第一篇博客文章

2021-01-22

本博客使用hexo框架，通过Git Pages服务部署在了github/gitee上。在这里说一下Windows系统(Windows10 20H2，可能会有系统版本不同导致的差异，但应该问题不大)在部署过程中可能遇到的一些问题以及yilia主题美化有关的一些东西。

一. Node.js安装

Windows系统直接去官网下载对应的64位或32位的安装包双击安装即可。这里要值得注意的是要配置环境变量。右键此电脑，点击属性。这里由于我的系统版本是20H2，点击属性之后不是直接打开系统属性页面，而是跳转到了以下界面：此时我们点击右边的高级系统属性。

然后在打开的界面中点击环境变量。在Path这一项中添加Node.js的安装路径。这里我安装在了D盘根目录下的NodeJs文件夹中，所以这里我就需要在Path这一项中新建一个环境变量，路径为D:\NodeJs\。

这里还有一步可选操作：由于Node.js自带的包管理器npm在进行全局安装时会默认安装到C盘，为了减轻C盘的存储空间负担可以将全局安装文件夹的默认路径修改到其他盘符。在管理员模式的cmd窗口下(按win键直接敲cmd搜索或者win键+R输入cmd)执行：

1
2
3

#这里我将默认路径改到我的Node.js的安装路径下,也可以选择直接安装到D盘根路径下等等
npm config set prefix "D:\NodeJS\node_global" 
npm config set cache "D:\NodeJS\node_cache"

执行完成后，再去系统属性中配置一下环境变量。将D:\NodeJS\node_global添加到Path中。(还有一种说法是需要添加一个系统变量NODE_PATH并添加路径D:\NodeJS\node_global，我这里的Node.js由于安装时间过于久远已经忘了这个NODE_PATH当时是否有效，我这里是有添加这个变量的，如果仅修改Path之后发生全局安装的模块command not found的情况，可以尝试添加一下NODE_PATH这一项，或者重启电脑)

由于国内直接使用npm的官方镜像比较慢，所以一般我们安装完Node.js之后都会配置一个淘宝的cnpm镜像源用来代替npm官方的镜像源。淘宝这个镜像源更新还是比较快的，一般不会出现版本不一样的问题。直接在cmd窗口中执行：

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

完成之后就可以通过cnpm install来安装模块了，速度会快很多。

二. git安装及配置

跟Node.js一样，git也是直接去官网下载对应的64位或32位安装包双击即可。git在安装过程中的选项比较多，这里说一下每个选项大概的意思。

这里的选项基本上不用动，用默认就行。

这里是选择.git文件的默认编辑器，推荐Nano、Vim，个人喜欢用VSCode。

设置初始化时的主分支名，一般用默认。

这里是选择将哪些工具添加到系统的环境变量PATH中。第一个是全部不添加，只能在Git Bash中使用git命令。第二个是仅添加git，不添加git附带的命令行工具(如Nano、Vim这些)。第三个则是将全部工具添加到环境变量中。

选择TLS库。第一个选择的是git自带的TLS库，第二个选的是Windows自带的TLS库。这两个库的差别主要在根证书上，选OpenSSL会使用Git带的根证书，选后者会用系统的根证书。

选择是否自动转换仓库中文件的换行符，此处选择中间项，提交时会自动转化成LF。有关LF、CR、CRLF可以自行百度。

选择Git Bash使用什么终端，建议选MinTTY。

选择git pull命令的默认行为。选第一个或者最后一个，在实际使用中最好避免使用git pull改为手动git fetch然后再git merge，具体命令的作用可以直接百度或者参见菜鸟教程。

选择git的凭据管理器(类似浏览器的密码管理器)，个人选择第一个。如果没有这个功能，每次提交都需要手动输入密码，git本身没有凭据储存的功能。

缓存和符号链接文件相关。

是否允许在Git Bash中使用Python或NodeJs等外部命令。

安装完成后就可以进行配置了。首先我们先要注册一个github或者gitee的账号。注册好之后，打开Git Bash终端，执行以下命令进行环境配置：

#配置用户名，此处"username"是自己的账户名
git config --global user.name "username"
#配置邮箱，"username@email.com"是注册时所用的邮箱，
git config --global user.email "username@email.com"
#执行完成后可用以下命令查看配置
git config --global --list

再然后生成SSH公钥：

1	ssh-keygen -t rsa

然后连敲三次回车(默认yes)，之后去C:\Users\用户名\.ssh文件夹中将id_rsa.pub文件中的内容复制出来。去github或者gitee的设置中找到SSH这一项，将复制的内容粘贴到Key中保存配置。这里是设置与git仓库以SSH的方式通信，只能在你是仓库所有人的情况下才能使用，在参与多人协作时非仓库所有者仅能通过HTTPS方式进行通信。

三. hexo框架安装及上手

hexo框架的安装同NodeJs及其包管理器npm与镜像源cnpm，可以通过Windows自带的cmd或者git所带的Git Bash执行以下命令全局安装hexo框架：

1	cnpm install -g hexo-cli

安装完成之后，我们就可以在本地生成自己的博客了。新建一个文件夹如myblog，进去之后右键在此处打开Git Bash。

hexo init：初始化一个博客。
hexo server：在本地(localhost:4000)启动当前博客。
hexo new "文章标题"：创建一篇新文章(markdown格式)
hexo clean：清除生成的临时文件
hexo generate：重新生成(每次对博客进行改动都需要清除之后再重新生成)

这样，一个hexo博客就已经搭建完成了，但是博客不可能只是在本地使用，所以这里使用github或者gitee的git page项目来部署我们的博客。在此之前需要安装一个自动将hexo博客部署到git上的工具。执行命令cnpm install --save hexo-deployer-git安装。

之后在github或者gitee中新建一个仓库，仓库名为github用户名.github.io，gitee则是直接以用户名为仓库名和仓库路径。这个仓库名不能随便起，只能按照这个要求，否则无法直接通过https://github用户名.github.io访问到博客页面(gitee的仓库路径需要手动改成用户名，否则则会以分级目录访问，同时gitee仓库需要在服务中手动开启Git Page服务，且每次提交后需要手动重新部署)。

创建完成后将SSH中的链接复制一下，打开你的博客根文件夹下的_config.yml文件。在最底部找到这一段，填入对应的参数即可，注意冒号之后均有空格且不可省略。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git #填入git
  repo: 刚刚复制的链接 #填入仓库链接
  branch: master #这个可以不填，git仓库默认也是master

保存退出后我们可以直接通过hexo deploy命令将生成的静态文件部署到git仓库，之后就可以通过https://github用户名.github.io直接访问我们的个人博客了。部署在github上的话可能国内连接速度有点慢，gitee会好很多。

四. 更换yilia主题及过程中遇到的问题

直接在博客的根目录下执行以下命令将yilia主题clone到themes文件夹下的yilia文件夹：

1	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

当然也可以直接访问yilia主题的github仓库地址下载压缩包解压到themes/yilia文件夹下。

下载完成后我们打开博客根目录下的_config.yml文件，找到theme参数将值由landscape改为yilia。

由于yilia已断更四年多，其中很多东西还是依照旧版本hexo 2.4设计的，而新版的hexo 3有不少改动，这里说一下在自定义yilia主题时遇到的一些问题：

1.左侧简介栏的作者名及副标题不显示。

解决方法：进入themes/yilia/layout/_parial文件夹，将header.ejs、left-col.ejs及mobile-nav.ejs文件内theme.subtitle、theme.author这两项改为config.subtitle和config.author。主题中的 _config.yml文件中没有subtitle和author的定义，默认从theme中读取会读取不到数据导致作者名和副标题不显示。

2.微信分享二维码图片无法显示。

原因：作者使用的百度云提供的链接转二维码的API接口失效。解决方法：更换接口。进入themes/yilia/layout/_partial/post文件夹，将share.ejs中最底部的

1	<img src="<%- 'qrcode' in locals ? qrcode(sUrl) : '//pan.baidu.com/share/qrcode?url=' + sUrl %>" alt="微信分享二维码">

改为

1	<img src="<%- 'qrcode' in locals ? qrcode(sUrl) : 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + sUrl %>" alt="微信分享二维码">

3.修改头像、网页图标。

将所用图片放到/themes/yilia/source/img下，然后在yilia的配置文件_config.yml中将路径填入avatar及favicon参数中，如avatar: /img/Avatar.png。此方法使用的图片存储路径不一定是正确修改hexo主题头像所用的路径，但方法可行。

4.解决标题中英文字母自动大写的问题。

修改/themes/source文件夹下的css文件，用编辑器的搜索功能查找text-transform属性，将所有text-transform对应的值都改成none。此处修改原有已经生成好的css文件以省去修改源码中scss文件后仍需重新进行打包生成这一步骤。

参考资料

菜鸟教程

hexo官方文档

yilia仓库Issues

CodeSheep的hexo博客搭建教程视频

本文作者： BBSD丿草丶帽
发布时间： 2021-01-22
最后更新： 2024-05-12
本文标题： 我的第一篇博客文章
本文链接： https://cloudflare.luhawxem.com/2021/01/22/MyFirstBlogArticle/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！