使用git+hexo部署自己的博客

Posted 2022-04-29 luqwer

目录

• git与node.js的安装配置
• hexo常用命令
• 在本地部署博客
• 通过Git Hub将博客部署到远端服务器
• 拓展
• 更新博客

记录自己的博客部署过程。

使用hexo+git部署博客。

参考视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

视频作者: CodeSheep

---

---

git与node.js的安装配置

git的安装

官方下载地址

git若从官方下载的话下载速度过慢且下载时间过长可能会出现下载失败等问题，因此推荐从镜像网站下载git。如淘宝npm的镜像。

国内镜像下载

选择最新版本下载即可，本文章书写日期时最新版本为2.22.0版本

因版本可能不同，因此安装过程中的组件选择可能会有所差异，基本默认选项即可

下载完成后进入安装界面 (注:以下安装的选项请以实际自身需求为准，仅供参考):

选择需要安装的组件。

选择git的默认编辑器:

配置环境变量选项,推荐默认第二项:

选择https传输协议 默认即可:

选择git的换行方式 请根据自身需求更改:

设置git命令行的样式:

设置选项：1.是否允许文件缓存 2.是否允许git许可证管理，默认勾选：

是否参与新的测试,貌似是会使git更快，但还不稳定:

install 安装即可:

git安装完成后，需要进行配置，在git安装目录或菜单栏中找到git-bash，打开后如图

输入如下，其中" "中的your name 和your email为你的Git Hub用户名(非昵称)与邮箱

git config --global user.name "your name"
git config --global user.email "your email"

并可通过以下命令查询用户名与邮箱

git config user.name
git config user.email

结果如下

---

node.js 的安装

官方下载

该文章书写时，版本为10.16.0

安装界面:

选择安装模式,我选择了第四个，next即可:

以下过程命令行既可使用windows的cmd，也可以使用git安装过程中的 git-bash进行操作

命令行中输入node -v可查看node的版本 ,输入 npm -v查看npm包的版本

node -v
npm -v

使用淘宝镜像下载 cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

下载完后查看cnpm版本

cnpm -v

使用cnpm下载hexo,用hexo -v查看hexo的版本:

cnpm install -g hexo-cli
hexo -v

---

hexo常用命令

hexo new "title" 新建文章(md文件)，title为文章的标题
hexo new page "pagename" 新建网页，pagename为网页的名称
hexo clean 清除部署的緩存
hexo n == hexo new 新建一篇文章
hexo g == hexo generate 生成静态页面
hexo s == hexo server 本地部署，可预览网站，默认端口为4000，浏览器输入localhost:4000即可进入网站进行预览，回到git-bash按ctrl+c退出预览(退出后localhost:4000失效)
hexo d == hexo deploy 将网站部署到GitHub
hexo g -d 生成页面并部署到GitHub
hexo g -s 生成页面并本地部署进行预览

---

在本地部署博客

在我的电脑中创建文件夹用于存储博客网站，文件夹名称自定义，我使用blog,目录为D:\blog。打开blog文件夹，右键空白处打开git-bash。

输入hexo init进行初始化，等待时间较长，约几分钟

hexo init

注：若blog文件夹非空，则会报错:

使用hexo s 在本地启动博客

hexo s

如图所示显示本地部署成功

打开网页，地址栏输入http://localhost:4000即可从本地进入博客

到此为止仅仅是在本地部署博客，接下来需要通过github来将博客部署到服务器。

---

通过Git Hub将博客部署到远端服务器

通过Ctrl+C停止服务

登陆自己的Git Hub 点击进入登陆界面

登陆成功后，网页右上角个人头像旁边，点击 + 号 选择New repository创建一个新的仓库

界面如图,其中Repository name中必须输入 [用户名].github.io

最后点击create repository创建仓库

创建成功后，界面如图，此时还没有任何代码。复制https的链接。

回到git-bash 使用cnpm安装git部署插件，插件名为:hexo-deployer-git

cnpm install --save hexo-deployer-git

安装过程中的警告可以忽略

修改 _config.yml 文件

vim _config.yml

移动到最低端，在deploy:后面修改文件，按 i 键进入插入模式，内容如下

  type: git
  repo: 刚刚复制的https链接
  branch: master

修改前:

修改后:

==注意==: windows系统下，冒号： 后面要有一个空格，缺少空格的话type、repo、branch不会高亮，语句不会生效

插入完成后，按ESC，然后输入 :wq 保存并退出(linux语句)

修改完配置文件后 输入hexo d 即可将博客部署到远端服务器

hexo d

最后结果如图:

该过程可能需要输入用户名和密码，若Git Hub配置过SSH则不需要输入。如果有报错，检查之前的

git config --global user.name "your name"
git config --global user.email "your email"

配置语句是否正确 your name为用户名(非昵称)

---

部署成功后刷新Git Hub刚刚创建的仓库页面，就能加载出博客的代码了

并且可通过 用户名.github.io 来访问自己的博客，效果如图：

至此，博客的部署已经完成。

---

拓展

打开blog文件夹，可看到有以下目录

1. 进入目录source/_posts

   里面的md文件 (markdown文件)为博客上的文章,可将md文件存放至该目录来更新博客

   hexo new生成的文章也存放在这里

2. themes目录里为博客的主题

   可从Git Hub下载主题并通过修改 _config.yml 来应用主题

   例如使用Git Hub上的yilia主题

   在git bash中输入以下代码进行克隆

   git clone http://github.com/litten/hexo-theme-yilia.git themes/yilia

   clone 为克隆操作

   http链接为目标代码仓库(repository) 后面加上 .git

   

   themes/yilia 为保存目录，将目标保存到themes/yilia中

   

   等待完成后，修改 _config.yml文件

   vim _config.yml

   修改目标如下

   

   将theme改为刚刚保存的目录 yilia ，然后更新博客。

更新博客

在localhost:4000 页面，大部分修改配置后可以直接刷新页面进行预览，如更改配置、更新文章等等。但有的操作需要清除缓存重新部署页面才可以生效，比如更新插件等等。

故有时直接刷新未加载出来的更新，可尝试重新部署来查看是否更新成功。

hexo clean #清除缓存文件
hexo g -s #在本地生成页面直接部署,可通过localhost:4000查看

若在本地预览发现网站符合自己的预期，即可将网站部署到github

hexo d