可以直接观看一位UP主的B站视频,本文即是根据视频所写。
第一步:安装Node.js
参考链接:https://blog.csdn.net/cnds123321/article/details/103988059
第二步:注册GitHub账号
注册链接:https://github.com/
并创建一个用户名.github.io的仓库
第三步:本地安装Git
下载链接:https://git-scm.com/download/win
第四步:安装hexo
官网链接:https://hexo.io/zh-cn/docs/
跳转到要安装的目录下,输入上述命令,前提是安装node.js成功
进行初始化,执行hexo init Blog命令,其中Blog是自定义的名称。
Blog文件夹下就会多些文件,具体作用查看官网
进入到Blog目录,并使用npm install命令进行安装
使用hexo s -p 5555执行,其中-p 5555表示设置端口号。
复制http://localhost:5555网址在浏览器打开
第五步:安装一个写前端网页的软件,如HBuilder、Subline等。本人使用的是HBuilderX
打开source/_posts目录下的hello-world.md文件,随便改点,然后刷新浏览器网页,就能看到效果
第六步:上传到github上的用户名.github.io仓库
先修改_config.yml的配置
执行npm install hexo-deployer-git --save命令安装插件
执行hexo g命令
再执行hexo d命令提交
在执行过程中会弹出一个对话框,输入GitHub的登陆用户名和密码即可
如果报这个错
那么按照命令,配置git信息
git config --global user.email "你的邮箱"
git config --global user.name "你的用户名"
然后再次执行hexo d提交
如此才算成功
打开浏览器,输入:https://你的用户名.github.io
第七步:选中hexo的模板
打开官网选中模板主题
可以打开预览,比如下面这个
第八步:使用主题
在官网中搜索next
进入
查看如何安装使用:https://github.com/theme-next/hexo-theme-next/blob/master/READM
点击链接下载最新版本。
选中版本进行下载
把主题改为next
把压缩包解压缩并改名为next,然后放进themes目录下
执行hexo s -p 5555命令,浏览器查看博客
效果如下:
再输入hexo g命令
可以查看http://theme-next.iissnan.com/使用文档进行更加主题化的设置。
使用hexo d命令提交到GitHub上
打开网页,也变成这种主题风格了
hexo插件
搜索插件
hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
然后在_config.yml文件的最后添加代码:
# 搜索插件
# Docs: https://github.com/wzpan/hexo-generator-search
search:
path: ./public/search.xml
field: post
format: html
limit: 10000
接着修改next目录下的_config.yml
将local_search下的enable改为true。
使用如下命令重新部署
hexo clean
hexo g
hexo serve
然后就会出现search
进行搜索。
文章文字统计插件
在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后修改/themes/next的_config.yml,找到下图的位置将enable修改为true。
接着还是在这个文件,搜索到footer,然后在下面添加如下红框内的代码:
然后找到themes/next/layout/_partials/footer.swig文件
然后添加如下代码在最底部
{% if theme.footer.counter %}
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}
然后就可以看到统计的结果 了
不过下面的数据不知道怎么是假的,但上传到GitHub上后数据就会变成真的了。