搭建hexo博客与yilia主题优化
一、目的
作为一个学程序的，有个个人博客，平时写写自己的学习笔记，记录一下自己的生活，写一些自己在学习过程中遇到的一些坑，还有记录一下自己的项目作品，我觉得这是一个很有趣的事，另外，个人博客在自己找工作的过程中是一个很好的加分项。
我其实也是一个小白，什么都不会，一些网页的知识都不知道，而我跟随大佬一步步搭建出了我的个人博客，故此记录一下整个过程，写一些我遇到的坑。
大佬视频：手把手教你从0开始搭建自己的个人博客
二、开始准备
1、Git
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目，之后我们会将博客部署到Github pages 中，所以一个Github的账号是必要的，还有自己电脑必须装有Git才能将博客部署上去。
Git下载地址
Git 的安装网上有很多教程，这里就不演示了。
Windows系统Git安装教程（详解Git安装过程）
安装成功后需要登录用户名和密码
git config --global user.email "you@example.com"
git config --global user.name "Your Name"git
然后使用
git config user.name
git config user.email
查看自己的Git账号
2、Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。我们需要Node.js来支持，生成 Hexo 。
Node.js 官网下载
Node.js 中文网
Node.js新版本安装很简单，一路下一步就好，可能要修改的就只有安装目录等，完了会提示你安装一下依赖项，确定就好，我因为安装的时候着急，依赖项安装了一半，没安装成功，最后找到开始菜单下的Install Additioal Tools to Node.js 才安装好的，所以安装的时候一定别着急。
三、部署环境
准备工作做好了之后建一个你之后要存博客的文件夹 Blog ，然后在这个文件夹中鼠标右键点击打开Git Bash Here ，用Git Bash 执行之后的命令比较好。之后如果中途出了问题，或者你想重新弄一个博客可以直接将这个文件夹删了重新来一遍
1、安装hexo框架
- 然后使用 node -v 查看安装好的版本
- 使用npm -v查看包管理器的版本
- 因为我们需要利用 npm 包管理器安装 hexo的框架，但npm的源在国外，下载很慢，故我们使用淘宝的源，使用
npm install -g cnpm --registry==https://registry.npm.taobao.org
我的是安装过得所以很快，你们的要自己看，错了也没事，重来就行
- 安装好了就用
cnpm -v查看版本
- 安装好cnpm后利用cnpm 安装 hexo
cnpm install -g hexo-cli
- 安装完可以用
hexo -v查看版本
2、解决Git Bash 中文乱码问题
- 打开设置后点击 Text，将 locale 中改为 zh_c ，将 Character set 中改为 GBK
修改后保存，退出 Git Bash ，重新打开就不会乱码了
四、初始化博客
- 使用
hexo init初始化 hexo ，注意文件夹必须是空文件夹
- 这里出现了一个错误 ，经过我多次查找问题，在百度上查询，最终找到原因，是因为没有node_modules文件夹，所以我们按照提示运行
npm install
直到没有错误出现
- 然后就可以启动博客了，使用
hexo s启动博客
- 然后就可以看到博客启动成功，在本地的4000端口启动，我们可以将这个地址添加到浏览器访问，（不能用Ctrl+C，那样会停止运行）
他会默认生成一个博客叫 Hello World，当然你完全可以直接删除 Hello World这篇文章。
五 、写博客
1、生成博客
- 博客已经生成了，现在我们已经可以写博客了，使用
hexo n "我的第一篇博客"，他就可以为我们创建一篇名叫“我的第一篇博客”的博客
- 这样就已经建立了一个博客，并且他将文件路径给了我们，我们可以先使用
pwd命令查看我们当前在哪个目录下
- 使用
cd命令切换到我们要编辑的文件夹，即cd source/_posts
- 然后查看当前文件夹的文件，使用
ls命令，即ls -l
就可以看到我们新建的博客了，还有hexo默认帮我们建的博客，
2、使用 vim 编辑器编辑博客
- 然后我们就可以写博客了，用
vim编辑器打开要写的博客
vim 编辑器刚进来是在命令模式下，我们需要按
a或i进入编辑模式，输入将要写的内容
注意，着这里我用了 Makedown 的方式写的写完后按
Esc键退出到命令模式，之后输入按:进入底线命令模式，输入wq按回车进行保存退出
- 然后我们退回到原来的文件夹目录，即刚开始的 Blog 目录，
cd ../..
- 然后使用
hexo clean清除一下，接着用hexo g重新生成一下
- 然后就可以重新启动博客了 ，使用
hexo s启动博客
- 打开浏览器，输入
http://localhost:4000查看博客
3、非命令行编辑博客
当然不会用命令行的或命令行用不惯的可以省略部分命令
hexo n "博客名称"和cd source/_posts可以在资源管理器内找到路径，右键点击新建文本文档，将文件后缀名改为.md，加上文件名，新的博客就创建成功了
vim 博客名称、按a或i进入插入模式、按Esc进入命令模式，按：进入底线命令模式、按wq保存退出，可使用任何一款带 Makedown 的编辑器，我使用的是 Typora ，很好用，Typora下载地址
- 剩下的
hexo clean、hexo g、hexo s是必须要记住的
4、vim编辑器中文乱码问题
找到 Git 的安装目录，比如说我的在D:\Program Files\Git 中，在这个文件夹中进入etc目录中，用文本编辑器打开 vimrc 文件，在里面添加
set fencs=utf-8,gbk,utf-16,utf-32,ucs-bom "编码配置
set nu "vim行号显示
修改完成后退出 Git Bash ，重新打开之后再使用 vim 编辑器时就不会乱码了
六、把博客部署到远端
现在已经可以写博客了，但是这样只能在本地查看，所以我们需要将博客部署到远端，这里我们使用 GitHub ** ，将我们的博客部署到GitHub**中，实现远程访问
1、创建仓库
- 首先我们需要一个 GitHub 的账号，可以在GitHub中注册
- 然后我们新建一个仓库
- 博客名称必须以你 GitHub 账号的昵称构成，比如说我的 GitHub 账号昵称为
thelnktears，则这个仓库的名称为thelnktears.github.io描述随便写
我这已经创建过了，所以就出错了，然后就创建
2、安装插件
- 之后回到我们电脑上创建的Blog 文件夹下，安装一个git 的部署插件，使用
cnpm install --save hexo-deployer-git安装
3、设置上传
- 然后修改 Blog 文件夹下的 _config.yml 这个文件，使用vim 编辑器打开
vim _config
- 按
a或i进入插入模式，找到 Deployment 在下面添加如下内容，按esc退出插入模式，按:进入底线命令模式，输入wq保存退出- type: git
- repo: 新建仓库的HTTPS的地址
- branch: master
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:type: gitrepo: https://github.com/thelnktears/thelnktears.github.io.gitbranch: master
新建仓库的地址可以在建完仓库后跳转的页面中得到，如果退出去了则可以在克隆仓库的地址中找到
4、上传博客
- 退出后使用
hexo d把博客部署到远端，在浏览器中输入https://thelnktears.github.io/，也就是你新建仓库的地址，有时GitHub 网比较慢，所以稍微等待
- 部署成功后
注意，如果你的 GitHub 昵称里有大写，建议你重新修改一下名字，不要有大写，因为大写的话浏览器会改为小写，从而无法访问到正确的地址
七、给个人博客换主题
现在博客的主题是默认带的，不好看，所以我们需要对其进行修改
1、下载主题
这里我们使用 yilia这个主题，写的很好，很多人用
使用git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 克隆下载 yilia 这个主题
2、修改主题
下载完成后需要将主题应用到我们的博客里面，设置主题我们需要修改Blog 目录下的 _config.yml 这个文件
使用命令 vim _config.yml 打开文件
找到 theme 这行，默认为 landscape ，修改为我们想要替换的主题
修改过后
这样我们的主题就换过来了，我们启动一下看看，使用 hexo clean 、hexo g 、hexo s 在本地启动
八、博客主题优化
此时，我们的博客已经换好主题了，但是不是我们想要的样子，所以对这个主题还要进行修改，换成我们想要的样子
1、网站名称
- 打开 Bolg 目录下的
_config.yml文件，修改名称，即title后的名称，修改为你想要的名称
2、副标题
即 subtitle 后的名称，可以放些你喜欢的句子
3、作者名称以及语言
author 以及language
修改完成后
4、修改头像
发现头像还没改过来，至于头像，我们需要到下载的主题的目录中修改而在下载时，将yilia 的主题下载到了 themes/yilia 这个目录下，所以我们打开这个目录，找到里面的 _config.yml 的文件，即 themes/yilia/_config.yml ，打开这个文件
找到如下行，添加你的头像，将你的头像图片放到 yilia 目录下的 source 中的 img 文件夹下，即Blog\themes\yilia\source\img ，并且将 _config.yml文件的如下行修改，在 avatar: 后面添加 路径 /img/avatar.jpg
#你的头像url
avatar:
5、修改网站图标
将你的图标放到 yilia 目录下的 source 中的 img 文件夹下，即Blog\themes\yilia\source\img ，并且将 _config.yml文件的如下行修改，在 favicon: 后面添加 路径 /img/avatar.jpg
6、修改连接
yilia 的主题帮我们打开了 Github 、微博、知乎等的链接，我不需要这么多，或者这些我用不到，那就修改掉，我想要的有Github 、QQ、微信，QQ 、微信我使用添加好友的二维码代替了
此时就会被修改为如下情况
目前看似差不多了，但是我们点击所有文章、友链、关于我时发现好像还是不对，那接着修改
7、所有文章
点击所有文章会弹出如下情况，按照提示，进行修改
输入 cnpm i hexo-generator-json-content --save
打开 Blog 文件夹下的 _config.yml 文件，添加如下内容
jsonContent:meta: falsepages: falseposts:title: truedate: truepath: truetext: falseraw: falsecontent: falseslug: falseupdated: falsecomments: falselink: falsepermalink: falseexcerpt: falsecategories: falsetags: true
然后所有文章就改过来了，
8、友链
添加友链，帮忙推广一些技术大佬，添加大佬们的网站、博客地址，同时添加友链也能增加自己博客的访问，打开 yilia 文件夹下的 _config.yml 文件，进行修改
9、关于我
添加一些关于自己的话
10、打赏
现在打开博客文章后，翻到后面会有一个打赏的功能，将其运用起来，如同加载头像、QQ、微信等的链接的方式，添加微信或支付宝的收款码
11、目录
现在博客已经可以了，但是我们点击随笔时会出错，经过查询，我知道了，这是一个标签，通过写的文章的标签添加到这个链接里（我的理解，大佬勿喷），而博客的随笔可能不多，相同这个后，我觉得应该为博客添加一个目录，以后文章多了找起来方便，写文章时添加一个名叫目录的标签，以此达到为博客添加目录的目的，简单易行。
之后每次写文章，在 tags 后面都添加一个目录的标签，就实现了目录的功能，注意每个标签后面都有一个空格，这是人家规定的，必须这样写，否则会出错
修改完启动博客，点击目录就会发现可以跳转到类似于目录的页面
然后使用 hexo d 把博客部署到远端，在浏览器中输入https://thelnktears.github.io/ ，也就是你新建仓库的地址，有时GitHub 网比较慢，所以稍微等待，然后你就会发现，博客被部署到远端了，之后你就可以将这个网址告诉别人，说这是你的博客网站
九、我们的博客
博客搭建好了，我没有添加评论等功能，因为十分麻烦，效果也不明显，就放弃了，现在的功能我已经满意了，剩下的就是多写博客，为博客添加内容。其实除了一些必要的明亮，搭建博客还是很容易的，毕竟别人帮我们写了很多内容，我们只是使用者。我的博客就这样了，我很满意，如果各位有不满意的可以在网上查找相关内容，修改_config.yml 文件，所有设置都是通过这个文件实现。
搭建hexo博客与yilia主题优化相关推荐
- hexo博客的yilia主题之添加分类
文章目录 添加 categories 页面 生成index.md文件 修改index.md文件 添加 categories 到menu菜单 yilia 主题的配置文件 main.826e88.css ...
- Hexo博客（Snail主题）搭建回顾概览
Hexo博客(Snail主题)搭建回顾概览 笔者搭建博客地址:saltyfishyjk's Blog 文章目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言 写作背景 定位 您在这里 ...
- python公众号留言功能_搭建hexo博客给公众号制作留言功能
大家都知道,18年3月份后注册的公众号都不给留言功能了,作为主要以技术文章为主的公众号,没有留言功能真是不方便.周末这两天我就一直在折腾这个留言功能,借助博客的留言功能,放在阅读原文里.昨天晚上终于折 ...
- 搭建hexo博客历程二- Gitee版 （主要 解决404和样式丢失）
前期的GitHub版搭建hexo博客 前期的node .hexo等等都已经配置完成,只需要在Gitee上建库,以及修改一些配置.继续依葫芦画瓢,在Gitee上画出来.例如 https://gitee. ...
- 搭建hexo博客给公众号制作留言功能
此文首发于公众号 「Python知识圈」,欢迎直接去公众号观看. 阅读文本大概需要 5 分钟. 大家都知道,今年注册的公号都不给留言功能了,作为主要以技术文章为主的公众号,没有留言功能真是不方便.上周 ...
- 史上最详细“截图”搭建Hexo博客——For Windows
http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...
- 在Github上搭建Jekyll博客和创建主题
在Github上搭建Jekyll博客和创建主题 之前本来想展开写的,后来发现Jekyll官网的教程已经非常完善了就没有多写,所以只有这篇. 但是过了这么久,发现很多人还是不清楚怎么搭建,所以这里打算详 ...
- 阿里云Serverless 极速搭建Hexo博客
阿里云Serverless 极速搭建Hexo博客 阿里云Serverless 极速搭建Hexo博客 地址 开通函数计算服务 安装Serverless Devs命令行工具 安装Node.js环境. 解压 ...
- 腾讯云搭建hexo博客
title: 腾讯云搭建hexo博客 tags: hexo,腾讯云 文章目录 title: 腾讯云搭建hexo博客 tags: hexo,腾讯云 @[toc] 1. 腾讯云 学生认证购买 重置密码和网 ...
- Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里 前言 马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...
最新文章
- java增强for循环
- html 怎么让tr的css覆盖td的_html表格标签
- 星型模型和雪花型模型比较
- Kafka单机、集群模式安装详解(一)
- VS2008编译boost库
- 前端学习（2648）：vue3.0的处理展示
- （补）20200911：力扣204周周赛题解下
- php smarty ci,CI整合Smarty，cismarty_PHP教程
- 免费的html空间,免费HTML网页空间（每月200 GB 流量托管静态网页超简单）
- escapexml java_fn:escapeXml()函数
- redis cluster 分布式锁_Redis的分布式锁的实现原理
- 图的邻接矩阵表示及其基本操作
- 三维可视化JavaScript组件接口
- 数电技术基础大恶补05：TTL门电路
- 微分方程数值解 matlab,本学期微分方程数值解课程总结（matlab代码）
- Unity URP DOTS Pathfinding+Animation 10000个单位
- C 生化危机 SDUT
- 展馆人流量怎么测算？
- 解题记录 LeetCode 下一个更大元素 单调栈
- 算法工程师 数据挖掘工程师_数据工程师的崛起