本文共 6178 字，大约阅读时间需要 20 分钟。
文章目录
1. 引言
不知不觉，我的博客已经在风雨飘摇中运行超过一年时间了，回想这一年的博客维护以及魔改经历，我觉得有必要详细记录一下博客搭建的过程，以防我不小心搞崩了博客…
2. 环境部署工作
2.1 安装Node.js
1.进入官网选择对应的系统下载：
官网：cmd或者powershell,输入: node -vnpm -v
显示版本号，即安装无误
npm为Node.js的包管理工具
2.2 安装Git
1.进入官网下载
官网： 2.安装 选好路径，完成安装 3.检查 打开git bash，输入：git --version
2.3 注册Github账号
1.Github官网,注册账号
2.新建项目项目名字为你的昵称.github.io，例如：
//我的昵称是Justlovesmile所以我的项目名称为Justlovesmile.github.io
3.代码库设置
创建好之后，保存<>code内的SSH，即：
git@github.com:XXXXXXXXX/XXXXXXXXX.github.io.git
点击右侧的Settings
向下找到Gihub pages,点击Launch automatic page generator，Github将会自动替你创建出一个pages的页面。 如果配置没有问题，大约几分钟之后，yourname.github.io这个网址就可以正常访问了
5.推荐开启强制使用https
2.4 安装Hexo
1.在合适的位置，如E:/hexo，安装hexo-cli,输入：
cd /e/hexo/npm install hexo-cli -g
再安装hexo
npm install hexo --save
安装完成后，检查
hexo -v
2.初始化一个文件夹：
cd /e/hexo/hexo initnpm install
3.生成Hexo页面：
hexo g
4.启动服务：
hexo s
默认是localhost:4000，打开浏览器输入即可
2.5 推送到Github
1.配置个人信息
git config --global user.name "XXXX"git config --global user.email "XXXXXXXXX@XXX.com"
2.生成密钥
ssh-keygen -t rsa -C "XXXXXXXXX@XXX.com"
3.查看id_rsa.pub文件，并整个复制
cat ~/.ssh/id_rsa.pub
4.然后再在Github中添加ssh key
5.修改hexo根目录下的文件_config.yml中的deploy，添加之前保存的ssh：
deploy: type: git repository: github: git@github.com:Justlovesmile/Justlovesmile.github.io.git branch: master
6.上传到github：
hexo d -g
如果没有hexo-deployer-git，安装
npm install hexo-deployer-git --save
7.查看blog,https://username.github.io
3. Hexo基础
3.1 写博客
1.新建文章
hexo new post '我的第一篇文章'
2.hexo自动生成一个md文件，修改md内容
头部如：---title: postName #文章页面上的显示名称date: 2020-03-10 12:30:16 #文章生成时间，一般不改，当然也可以任意修改categories: 默认分类 #分类tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意冒号:后面有个空格description: 摘要---
3.在头部下面即可写文章内容
markdown，支持html和其自带的语法。Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
3.2 新建页面
hexo new page "music"
会在source文件夹中生成music文件夹，其内的index.md为页面内容
3.3 常用基本命令
hexo new "文章"hexo new post "文章"hexo new page "页面"hexo clean #清除缓存，每次重新部署时最好执行hexo g #生成静态页面hexo s #本地端口，默认4000运行hexo s -p 5000 # 端口5000hexo d #部署hexo deploy #部署
#为了方便，每次准备推送时,可以👇hexo cl && hexo g && hexo d
4. Hexo进阶
4.1 推荐编辑器
方便后续魔改内容
- VSCode
- Sublime Text
4.2 更换主题
1.因为自带的主题并不好看，所以可以更换主题，常见主题的很多，例如butterfly
cd /e/hexo/git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
2.修改hexo根目录下的_config.yml中的 theme: landscape改成theme： butterfly ,(注意冒号：后面有一个空格)
4.3 注册Coding账号
1.由于国内访问github的速度较慢，因此可以通过双部署同时部署到Coding，同样注册账号，新建项目，项目名随意
SSH 3.修改hexo根目录下的文件_config.yml中的deploy，添加之前保存的ssh： 例如我的： deploy: type: git repository: github: git@github.com:Justlovesmile/Justlovesmile.github.io.git coding: git@e.coding.net:justlovesmile/justlovesmile.top.git branch: master
4.在Coding中保存你的密钥，方法同Github
cat ~/.ssh/id_rsa.pub
5.下次hexo d -g部署后,开启静态网站，然后可以通过其提供的//xxxxxxx.coding-pages.com访问。（第一次记得点，立即部署）
6.推荐开启强制使用https
4.4 注册Gitee账号
1.除了Coding外，网内访问速度较快的还有码云，同样注册账号，新建项目yourname
SSH 3.修改hexo根目录下的文件_config.yml中的deploy，添加之前保存的ssh： 例如我的： deploy: type: git repository: gitee: git@gitee.com:justlovesmile/justlovesmile.git coding: git@e.coding.net:justlovesmile/justlovesmile.top.git github: git@github.com:Justlovesmile/Justlovesmile.github.io.git branch: master
4.在Gitee中保存你的密钥，方法同Github
cat ~/.ssh/id_rsa.pub
5.开启GiteePages服务，Gitee只能免费使用gitee.io域名,其他的域名要收费，并且免费版每次部署后，需要手动点击更新来更新网站内容
4.5 绑定域名
1.在阿里云购买自己喜欢的域名
2.在阿里云控制台找到云解析DNS
找到自己购买的域名,点击解析设置
添加记录
3.如果多部署了，可以设置多条
一条给github.io，一条给coding-pages.com等等
4.再返回到对应的部署页面，修改解析域名
- Github的在仓库的
Settings--Github_Pages--Custon_domain - Coding的
静态网站-设置-自定义域名
4.6 安装插件
1.安装hexo插件
npm install hexo-generator-sitemap --savenpm install hexo-generator-baidu-sitemap --savenpm install hexo-generator-feed --save
2.在hexo根目录下的文件_config.yml中添加
Plugins: # 在该区域添加两个插件名称 - hexo-generator-sitemap - hexo-generator-baidu-sitemap - hexo-generator-feed# 自动生成sitemapsitemap: path: sitemap.xmlbaidusitemap: path: baidusitemap.xml
3.更多插件见
4.7 添加robots.txt
1.在hexo根目录下的source文件夹中，创建一个名为robots.txt的文件
2.内容为User-agent: * Allow: /Allow: /categories/Allow: /tags/Allow: /archives/Disallow: /js/Disallow: /css/Disallow: /images/Disallow: /img/Disallow: /lib/Sitemap: https://XXXXXXXXXXX.XXX/sitemap.xmlSitemap: https://XXXXXXXXXXX.XXX/baidusitemap.xml
4.8 创建百度站长账号
1.进入百度站长，注册账号，登录
2.点击用户中心-站点管理-添加网站3.验证
（1）若选择文件验证，则下载文件到根目录下的source文件夹中，并在文件内容最上面添加三行---layout: false---
（2）若选择HTML标签验证，需要找到主题下的head文件位置，添加其给的html代码，（一般在/themes/xxxxxx/layout/**/head.pug(ejs)内)
（3）若选择CNAME验证，操作和绑定域名操作一样，看其给的说明即可
4.推送你的网址，使之更快收录
点击左侧资源提交-普通收录可以选择三种方式提交网址 4.9 创建百度/谷歌统计账号
1.现在绝大部分国内主题集成了百度统计和谷歌统计功能，如果没有可以自行在head文件内添加，和上面的html标签验证相似
其中问号?之后的一串数字为你的统计id
hm.src = "https://hm.baidu.com/hm.js?a2ee893562999ebad688b0d82daa100a";
2.谷歌同理，不过需要翻墙才能进去
4.10 CDN图床
1.博客中往往会使用到很多图片，如果全部都保存在博客中，那肯定是不行的，推荐使用Github+Jsdelivr+PicGo搭建免费图床
CDN，名字随意 3.生成Token 依次选择Settings-Developer settings-Personal access tokens-Generate new token，勾选repo，然后点击Generate token生成一个Token 注意这个Token只会显示一次，自己先保存下来，或者等后面配置好PicGo后再关闭此网页
4.配置PicGo，使用jsDelivr的CDN
(1)下载PicGo (2)设置仓库名 (3)设置分支名 (4)设置Token (5)指定存储路径 (6)设定自定义域名 #每次上传后,生成图片路径自定义域名+/+储存路径+上传的图片名
5. 主题配置总结
5.1 Ayer主题修改魔改–适用ejs类型的主题
5.1.1 随机博客封面
5.1.2 添加二级菜单
5.1.3 添加公告板
5.2 Butterfly主题魔改–适用pug类型的主题
- 看Butterfly作者的教程
- 看小康博客
6. 主题魔改
6.1 页脚养鱼🐟
- 摘取自
1.在\themes\butterfly\layout\includes\footer.pug最后添加这句话
#jsi-flying-fish-container.containerstyle. @media only screen and (max-width: 767px){ #sidebar_search_box input[type=text]{width:calc(100% - 24px)} } 2.然后添加js文件，如果是butterfly在主题配置的inject处添加即可
3.修改样式，butterfly在themes\butterfly\source\css\_layout\footer.styl，这一部分对应修改
#footer position: relative background: $light-blue background-attachment: local background-position: bottom background-size: cover if hexo-config('footer_bg') != false &:before position: absolute width: 100% height: 100% background-color: alpha($dark-black, .1) content: ''#footer-wrap position: absolute padding: 1.2rem 1rem 1.4rem color: $light-grey text-align: center left: 0 right: 0 top:0 bottom: 0 6.2 valine评论
6.3 博客文章加密
: 文章添加密码功能
6.4 打字机效果
: 添加打字机效果
6.5 图标，动态图标，网页运行时间，全站黑白，鼠标点击特效，网页动态标题，樱花，音效
: 关于font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效
6.6 旋转小人，每日诗句
: 添加旋转小人和每日诗句
6.7 展示pdf
6.8 插件汇总
6.9 前端禁止右键，F12，F5
- 在文件中添加以下代码
转载地址：http://vbgwi.baihongyu.com/