NodeJS+Hexo快速搭建博客(Matery主题)详细教程(含github代码
前⾔
本⼈为纯前端⼩⽩,以前抱着玩玩的⼼态⽤Python+Django搭建过⼩Demo。近⽇⼼⾎来潮准备建个博客,
但是不太想花过多时间(懒)。随便在⽹上翻了⼀下发现可以利⽤Github Pages(github为代码托管平台,Github Pages为其出的⼀项服务可以通过静态⽂件和静态站点⽣成器Jekyll来实现博客⽹站,不仅可以⽩嫖域名和服务器,并且此服务完全免费! )。
于是我开始Google搜索Github Pages相关资源,最后发现了NodeJS+Hexo这个⼤宝藏,在学习和实现功能的过程中⼀共花了我3天时间,因为在学习过程中收益于诸多⼤佬的教程和代码,因此我决定将我搭建的过程和遇到的坑记录下来供⼤家分享。
新加坡郭美美⽂中我会列出我所参考的原⽂链接和资料供⼤家进⼀步学习。
Github源代码仓库
如果你已经会NodeJS+Hexo的基本操作,那么你可以直接从我的仓库download代码到本地,或者运⾏git clone
git@github:tangg555/Blog-Hexo-Matery-theme.git(如果安装了Git)将所有⽂件下载到本地。
解压⽂件之后,在Blog-Hexo-Matery-theme的根⽬录下右键菜单点击弹出命令框,或者Win+R打开命令提⽰符(CMD),cd到Blog-Hexo-Matery-theme的根⽬录下。在命令框中输⼊如下命令进⾏测试:
hexo g  # ⽣成博客⽹页⽂件
hexo s  # 本地预览博客,在浏览器中打开localhost:4000/进⾏查看
hexo d  # 上传⽹页⽂件到github,使⽤这个命令可以直接把代码部署到Git Pages中
这⾥可以参考或者。 到此为⽌博客就搭建完成了。如果你想要修改博客中的信息,你需要修改根⽬录下的_l⽂件以及主题⽬录下的_l⽂件
根⽬录配置⽂件_l和主题⽬录配置⽂件_l中修改个⼈信息。
根⽬录配置⽂件中修改deploy⼀栏的repository。
根⽬录配置⽂件中修改baidu_url_submit⼀栏的token。
主题配置⽂件中修改gitalk⼀栏,修改⽅法见正⽂。
如果你对如何编写代码或者个性化设计⾃⼰的博客感兴趣,那么请继续往下看。
详细教程
⼀、环境搭建
1.1. 安装NodeJS
需要注意的是nodeJS有两种版本,⼀个是长期⽀持版,还有⼀个是最新版,这⾥建议下载长期⽀持版,因为最新版可能不⽀持部分package导致程序出现莫名其妙的错误。⽐如在2020.5.20我使⽤的NodeJS v14.3.0不⽀持hexo-cli 3.9.0导致博客运⾏出错,后⾯换成LTS v12.16.3就好了。
最后安装好之后,按Win+R打开命令提⽰符,输⼊node -v和npm -v,如果出现版本号,那么就安装成功了。
这⾥的npm是随同NodeJS⼀起安装的包管理⼯具,能解决NodeJS代码部署上的很多问题。在这份教程⾥npm只需要最低程度的了解就⾏,可以参考。
出票失败怎么办先运⾏npm install -g nrm再运⾏nrm use taobao,这样我们的镜像原就换成淘宝的了。宫锁沉香赵丽颖朱梓骁床戏
1.2. 安装Git
为了把本地的⽂件上传到github上⾯去,我们需要⽤到分布式版本控制⼯具————Git。
安装选项全部默认,只不过最后⼀步添加路径时选择Use Git from the Windows Command Prompt,这样我们就可以直接在命令提⽰符⾥打开Git了。
安装完成后在命令提⽰符中输⼊git --version验证是否安装成功。
1.3. 注册Github账号并创建Git Pages仓库
GitHub是通过Git进⾏版本控制的软件源代码托管服务平台,要成为⼀名合格的程序员(媛),Github是必备知识之⼀_(:з)∠)_。
好的电视剧
我已经创建过了这个仓库所以这⾥报了重名的错误。
项⽬建成后,点击Settings,向下拉到最后有个GitHub Pages,点击Choose a theme选择⼀个主题。然后等⼀会⼉,再回到GitHub Pages,会变成下⾯这样:
点击那个链接,就会出现⾃⼰的⽹页啦。
1.4. 安装Hexo
在合适的地⽅新建⼀个⽂件夹,⽤来存放⾃⼰的博客⽂件,⽐如可以放在D:\study\program\blog⽬录下。
在该⽬录下右键点击Git Bash Here,打开git的控制台窗⼝,以后我们所有的操作都在git控制台进⾏,就不要⽤Windows⾃带的控制台了。定位到该⽬录下,输⼊npm i hexo-cli -g安装Hexo。有可能有⼏个报错,⽆视它就⾏。
安装完后输⼊hexo -v验证是否安装成功。
然后就要初始化我们的⽹站,输⼊hexo init初始化⽂件夹,接着输⼊npm install安装必备的组件。
1.5. 连接Github与本地
这⾥以我的Github账号为例,⾸先右键打开git bash,然后输⼊下⾯命令:
git config --global user.name "tangg555"
git config --ail "463127899@qq"
⽤户名和邮箱根据你注册github的信息⾃⾏修改。
周韦彤露卫生巾然后⽣成密钥SSH key:
ssh-keygen -t rsa -C "463127899@qq"
打开github,在头像下⾯点击settings,再点击SSH and GPG keys,新建⼀个SSH,名字随便。
git bash中输⼊
cat ~/.ssh/id_rsa.pub
将输出的内容复制到框中,点击确定保存。
输⼊ssh -T git@github,如果如下图所⽰,出现你的⽤户名,那就成功了
注意,创建ssh key期间如果要输⼊什么东西的话,直接回车就⾏,其中password phrase是密码,每次上传时都需要输⼊。
打开博客根⽬录下的_l⽂件,这是博客的配置⽂件,在这⾥你可以修改与博客相关的各种信息。
修改deploy的配置:
# Deployment
## Docs: hexo.io/docs/deployment.html
deploy:
type: git
注销个体营业执照需要什么手续repository:
github: git@github:tangg555/tangg555.github.io.git
branch: master
到这⾥为⽌,所有必须的环境就全部搭建完了
⼆、Hexo源代码介绍
2.1.根⽬录/
下图为根⽬录⽂件结构:
其中:
.deploy_git为运⾏hexo d命令后⽣成的⽂件⽬录;
node_modules是npm安装包的存放⽬录;
注意!,这个⽂public是运⾏hexo g命令⽣成的静态⽂件,包含css, js, html等⽤于渲染的⽂件以及markdown格式的post等数据⽂件。注意!
件夹⾥的东西是⾃动⽣成的,是⽤来给Git Pages部署的,因此不⽤⼈为修改⾥⾯的东西。(⽐如增加图⽚之类的,因为⼀运⾏hexo g 命令就会⾃动重载)
scaffolds存放draft.md, page.md, post.md三个样式⽂件,点进去看⼀下就知道怎么回事了
source存放的⼤多是数据,⽐如markdown格式的post⽂件,或者你要⽤到的图⽚等⽂件。
themes⽬录存放主题,我所使⽤的主题为matery,点开⾥⾯⼜是⼀番新天地…
_l是总的配置⽂件,这个⾮常重要!主题⾥⾯也有⼀个_l,主要⽤来控制博客的外观。
db.json这个不⽤管
LICENSE这个是协议,只要你copy的代码⾥⾯有这个,你的代码公布出去就必须包含这个⽂件。
package.json和package-lock.json是使⽤npm安装包时⽣成的⽂件,你可以在⾥⾯看到所安装包的版本情况。
2.2.主题⽬录/themes/matery
下图为主题⽬录⽂件结构: