使用下面的方法将帮助你在GitHub上搭建一个博客网站,将GitHub当做服务器,无需买域名,简直不要太 Nice!
1、软件准备
1.1、Git
1.2、Node.js
Node安装:按照安装过程依次点击即可,安装过程很简单。
2、安装Hexo(在Git中进行)
1 | 什么是Node.js? |
常用hexo命令:
1 | 1、hexo d :hexo deploy #将本地数据部署到远端服务器(如github) |
3、初始化操作过程:
1 | 1、在本地一个磁盘下建立Blog文件夹 |
hexo s 启动时报错,上网查说是Node.js版本低了,删除Blog文件夹,重新装一个新版本的Node.js,重新操作:
登录 http://localhost:4000/
4、网站升华1:将网站部署到GitHub远程仓库上
4.1、新建仓库(不勾选创建readme文件):
仓库名必须是【用户名.github.io】
4.2、在Blog目录下安装一个hexo部署插件:
1 | cnpm install --save hexo-deployer-git |
4.3、找到 Blog 文件中的 _config.yml 文件,使用编辑器如 Visual Studio Code打开,找到:
对这段代码进行更改:
1 | type 一个名字,建议写成git方便识别 |
4.4、更改后进行保存,再在Git里面输入 hexo d 将本地文件部署到GitHub新建的仓库中。
4.5、通过 https://+自己的GitHub仓库名 访问部署到GitHub上的Blog。如我这里:
4.6、想在GitHub上加上readme文件的,可以点击项目文件下的add a readme进行添加:
5、网站升华2(更换blog的主题)
以 yilia 主题为例进行更换:
5.1、下载 yilia 主题:
1 | 在Git命令行中输入: |
5.2、修改 Blog 文件夹下的 _config.yml 文件中的 theme 为 theme: yilia
5.3、网站生成以及部署到GitHub:
1 | hexo clean 更换主题后要清除缓存文件 (db.json) 和已生成的静态文件 (public) |
6、网站升华3(个性化)
参考链接:
Hexo yilia 主题一揽子使用方案
1 | 所有修改过后都得执行: |
6.1、作者改为自己的昵称:
6.2、修复点击“所有文章”时提示缺失模块的问题
1 | 按照提示操作即可: |
6.3、配置图片资源(头像、网页图标、二维码)
1、添加图片资源文件夹:
在 themes/yilia/source/ 下,添加assets 文件夹,里面存放图片资源。如:
2、配置文件中直接引用:
在 themes/yilia/_config.yml 中,找到后引用相对路径(实际上这里的路径都是生成项目后Blog/.deploy_git 下的相对路径)即可:
1 | 保存后,执行; |
6.4、文章显示摘要
问题:点击主页时,发现所有文章都是全文显示,不利于查找,可控制限制的字数。
解决方法:在你的MD格式文章正文插入 <!-- more -->
即可,只会显示它之前的,此后的就不显示,点击文章标题,全文阅读才可以看到,同时注释掉 themes/yilia/_config.yml 中的以下内容(重复):
1 | hexo clean |
6.5、文章显示目录
增加文章目录 TOC(table of content ),方便阅读文章, 在 themes/yilia/_config.ym中进行配置 toc: 2 即可:
它会将你 Markdown 语法的标题,生成目录,目录查看在右下角:
6.6、增加归档菜单,去掉不必要的内容(自行选择)
修改 themes/yilia/_config.yml
6.7、修改代码块样式
默认的代码样式太刺眼了,调成稍微柔和一些的,这里是调成 Atom 风格,以下为两种方式都可以,推荐第一种直接修改编译好的文件,不然还需要重新build。
1、直接修改编译好的文件。路径为:themes\yilia\source\main.0cf68a.css
修改代码背景色,查找 .article-entry .highlight ,修改background后面的颜色:
修改为:rgb(40, 44, 52)
修改代码字体颜色,查找 .article-entry .highlight .line ,修改color
修改为:rgb(182, 182, 182);font:Console;
2、修改源文件重新build。上述资源对应源文件为 yilia\source-src\css\highlight.scss,按照如下方式build:
1 | cd 到 yilia 目录下 |
修改前:
修改后:
6.8、增加不蒜子统计,统计博客访问量
1、安装不蒜子脚本
1 | 在 themes\yilia\layout\_partial\after-footer.ejs最后添加: |
2、添加统计网站访问量
1 | 修改 themes\yilia\layout\_partial\footer.ejs,包括访客数和站点访问总量: |
3、单篇文章点击量
1 | themes\yilia\layout\_partial\article.ejs中 |
6.9、增加版权声明
1、配置yilia:
1 | 在themes\yilia\layout\_partial\article.ejs中 |
1 | 1、创建新文件: |
2、配置显示
1 | 1、修改 themes/yilia/_config.yml 在里面加入: |
3、在根目录的配置文件中配置URL(自己的网站网址):
6.10、鼠标点击有小爱心效果
1、在themes/yilia/source/ 下新建一个 love.js 脚本文件,脚本代码内容如下:
1 | !function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document); |
2、在 themes\yilia\layout_partial\footer.ejs 中加入以下代码:
1 | <!--页面点击小红心--> |
6.11、在博客网站左边栏设置一个音乐播放器
参考链接:Hexo博客yilia主题添加背景音乐 (网易云音乐)
1、音乐来源:
2、引入播放器代码:
1 | 在themes/yilia/layout/_partial/left-col.ejs文件nav标签中添加代码, |
3、在yilia主题配置文件中添加属性:
1 | # 网易云音乐插件 |
1 | hexo clean |
6.12、置顶文章设置
参考链接:怎么置顶文章
1、安装插件:
1 | npm uninstall hexo-generator-index --save |
2、配置置顶标准:
1 | 打开:/themes/yilia/layout/post.ejs |
3、配置文章:
1 | 在需要置顶的文章的Front-matter中加上top选项即可 |
4、优先级配置:
1 | 修改根目录配置文件/_config.yml, |
6.13、在左侧显示总文章数
1 | 在themes\yilia\layout_partial\left-col.ejs文件的 |
6.14、解决微信分享异常问题
问题:
解决:
1 | 1、首先是百度网盘取消了生成二维码的功能: |
这样就可以了。
6.15、看板娘(白猫tororo)
参考链接:
Hexo博客yilia主题首页添加helper-live2d模型插件
1、安装模块:
1 | 在Blog根目录执行命令: |
2、下载你想要的模型:
项目链接:https://github.com/xiazeyu/live2d-widget-models
模型预览:https://huaji8.top/post/live2d-plugin-2.0/
tororo白猫预览:
1 | 使用命令安装tororo(自行选择自己喜欢的)模型: |
3、详细配置:
1 | 在根目录的 _config.yml 文件或主题的 _config.yml 文件中添加配置。 |
6.16、增加gitalk评论系统
选择 gitalk 是因为其界面好看,配置也简单。
参考链接:
1、注册 OAuth Application
注册网址:https://github.com/settings/applications/new
1 | Application name |
注册成功后,会获取到 Client ID/secrets 。
2、配置
1 | 1、themes/yilia/layout/_partial/post目录下新增gitalk.ejs文件,里面写入以下内容: |
3、新建一个仓库用来存放评论,如:
4、测试:
6.17、文章加密(加密的密码不会一起上传到GitHub,不会泄露)
1 | 在根目录的配置文件中,加入以下代码: |
7、新建博客文章
7.1、新建、编写、生成、部署
1 | hexo n "我的第一篇博客" # 等价于hexo new "我的第一篇博客" |
在VSCode上编写Markdown文档时,可以按ctrl+shift+p 打开命令输入框,输入Markdown,打开侧边预览:
博客文章里加入音乐,只需复制网易云上的外链播放器链接:
1 | 写好博客保存后,执行: |