本文详细介绍了如何使用码云和Hexo搭建个人博客，从准备环境开始，包括安装Node和Git，注册码云，安装Hexo。接着通过初始化Hexo、生成静态页面和启动本地服务来搭建博客。在美化博客部分，涵盖了主题设置、头像、背景、搜索、分类、标签等多方面内容，最后讲解了评论模块接入、对接码云远程仓库的步骤，帮助你打造个性化博客。
文章比较长，需要侧边栏目录的，可以点击我的个人博客地址：http://zwd596257180.gitee.io/blog
如果有什么问题想问的，请在 CSDN 上留言。
准备环境
- 安装 Node
- 安装 Git
- 注册码云
- 安装 Hexo
npm install hexo-cli -g
- 出现下图表示安装成功：
搭建本地个人博客
初始化 hexo
- 新建一个空白文件夹（下文提到的“项目根目录”是指你新建的文件夹的位置）用于存放 hexo 资源。在空白文件夹里面打开 Git Bash ，输入下列命令行进行初始化，初始化成功后会在文件夹生成如下图的文件。
hexo init
生成静态页面
hexo g
启动本地服务
hexo s
- 关闭本地服务器在 Git Bash 界面按 Ctrl+C， 在浏览器输入：http://localhost:4000 查看
美化个人博客
博客主题设置
克隆主题
- 在项目根目录下的 themes 文件中，打开 Git Bash ，用命令行克隆下新的主题。我这里用的 Next 主题，需要其他主题的自己百度找。
git clone https://github.com/theme-next/hexo-theme-next.git
配置主题
- 用文本的方式打开项目根目录下的 _config.yml 配置文件，找到 theme 把原来默认的
landscape主题名字，改成刚刚克隆的主题名字（主题名字为上图中文件夹的名字）。
测试主题
-
重新回到项目根目录下，打开 Git Bath ，用命令行启动服务器。在浏览器访问 http://localhost:4000
发布文章
- **方法一：**在项目根目录下，打开 Git Bash ，执行新建命令，然后 hexo 会自动在指定目录下生成对应文件，如下图所示。然后找到新建好的文件，打开即可进行编辑。
hexo new "此处输入文章名字"
- **方法二：**可以直接把已经准备的 md 格式的文章复制到 项目名称 /source/_posts 目录下，然后打开文件，在文件头加入 front-matter 部分，title 表示文章标题，date 表示发布时间。如图所示，图片上用到的其他参数，后面会介绍到。
- 重要的事情说三遍！！！
- front-matte 书写的时候要注意，冒号后面要跟一个空格号。
- front-matte 书写的时候要注意，冒号后面要跟一个空格号。
- front-matte 书写的时候要注意，冒号后面要跟一个空格号。
---
title: a
date: 2019-04-14 23:10:17
---
- 准备好 md 格式文件后，使用下面命令生成网站静态文件到默认设置的 public 文件夹，然后再启动本地服务器。
hexo g
主题风格设置
- 打开主题文件夹下的 _config.yml 配置文件（注意：这里要区别，不是項目根目录，主题文件夹的路径为：新建空白文件夹名称/themes/主题文件夹名称）。通过查找功能找到 Schemes 模块，修改为 Gemini 风格。如果喜欢其他风格可以自己修改。如下图所示：
- 刷新页面可以看到新风格的界面如下图所示：
博客左侧栏设置
- 在上面的网站界面，可以发现网站的文字是英文，只要修改一下语言模式即可。打开根目录文件夹下的 _config.yml 配置文件。找到 language，设置为 zh-CN。标题等其他参数的设置如下。可以对照效果图的具体位置，根据自己的实际需求进行修改。（注意：修改了项目根目录下的 _config.yml配置文件，需要重启部署项目后才能生效）
分类设置
添加分类列表
- 在项目根目录下，执行下面的命令行，新建分类页面，然后会在项目根目录下的 source 文件夹中新建一个 categories 文件夹。
hexo new page categories
- 打开 categories 文件夹中的 index.md 文件，添加 type 字段，设置为 “categories”。如下图所示。
- 接着到主题文件夹下的 _config.yml 配置文件下，找到 menu 模块，把 categories 的注释给去掉。如下图所示。
- 刷新页面（如果刷新没效果，可以重启服务），可以在页面左侧栏上看到多了一个“分类”列表。
如何将文章添加到对应分类？
- 文章发布前，在 front-matter 部分，多写一个 categories 字段，然后参数写上类别的名称，保存后重启服务，在网页上点击“分类”，可以看到分类下已经生成了刚刚设置的类别，并把刚刚发布的文章归类在此类别下。如下图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9gWMcfIn-1571454072700)(http://zwd.yyzheng.cn/hexo_manong_blog/9c256cae759cdcffs.png)]
标签设置
- 方法跟分类设置一样，所以不再赘述介绍。
- 但是需要补充一点， front-matter 中字段有多个参数的时候，可以使用如下图的写法。
Hexo 博客添加站内搜索
- NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。下面介绍 Local Search 的安装吧。注意：安装的时候要是项目根目录下安装。
- 安装 hexo-generator-search
npm install hexo-generator-search --save
- 安装 hexo-generator-searchdb
npm install hexo-generator-searchdb --save
- 在项目根目录下的 _config.yml 配置文件的文末添加下面这段代码。
search:
path: search.xml
field: post
format: html
limit: 10000
- 编辑主题文件夹的 _config.yml 配置文件，设置 Local searchenable 为 ture。
- 重启服务，效果图如下：
博客头像设置
添加博客头像
- 打开主题文件夹下的 _config.yml 配置文件，通过查找功能找到 avatar，然后把一个在线的头像图片地址（百度图片中直接复制链接即可），作为 url 的参数。如下图所示：
- 然后刷新页面，可以看到网站上已经显示了相应的头像了：
设置头像圆角并旋转打开
- 打开主题文件夹的 source\css_common\components\sidebar 目录下的 sidebar-author.styl 文件，然后把下面的代码添加进去即可。
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
- 效果图如下：
右上角 fork me 设置
- 在 GitHub Corners 上选择你喜欢的挂饰，复制方框内的代码。
- 打开主题文件夹下的 layout 文件夹，用记事本的方式打开 _layout.swig，把刚刚复制的代码放到
下面，并把 href 的参数，修改为自己的 github 链接（放自己要跳转的网址即可）。
- 重启服务器，查看效果图：
网页背景设置
动态背景设置
- 打开主题文件夹下的 layout 文件夹，用文本的方式打开 _layout.swig 文件，在文末加上如下的代码：
<!-- 动态背景 -->
<script type="text/javascript" src=
最低0.47元/天 解锁文章
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
