NodeJS+Hexo快速搭建博客（Matery主题）详细教程（含github代码）
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 命令就会⾃动重载）
dnf阿修罗怎么加点
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
下图为主题⽬录⽂件结构：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。