Hexo+Gitee搭建个人博客

skill

发布日期: 2021-02-01

文章字数: 1.6k

阅读时长: 6 分

阅读次数:

搭建个人博客一般有三种方式，第一种是在现有的博客平台，如CSDN，博客园等搭建；第二种自己通过租云服务的方式，部署一些应用等，但数据库和应用的维护都是要靠自己，难免繁琐；第三种就是使用一些前端框架生成静态页面然后托管到Gituhub或者Gitee上。

本文介绍以hexo框架，通过渲染引擎自己会生成一些代码页面，然后把这些代码页面托管到国内的代码仓库服务器Gitee上，实现免费的个人博客搭建。PS:不放在Github上的原因是因为有时候访问会特别慢。

一、环境搭建

接下来，我们就需要安装两个重要的环境，一个是提供版本克隆与下载跟踪的Git，一个是由文本文件生成HTML文件的Hexo框架，其中：

node.js下载可以从其官方界面开始https://nodejs.org/zh-cn/
Git下载则可以从其官方界面开始https://git-scm.com/

1. 安装Node JS并修改默认源

安装NodeJS方式简单，从官网下载了安装包一直Next即可
检查node.js安装结果，使用win+R 打开 cmd 窗口

node -v
npm  -v

更换npm下载的源为淘宝源

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

2. 安装Git并配置

安装git过程简单,也是从官网下载安装包,然后一直next即可
注册码云账号,登陆码云,这里注册过程自行解决即可

git初始化配置,在桌面空白处鼠标右击,打开Git bash Here

git config --global user.name "lxxxxdy"    #码云用户名
git config --global user.email "xxx83@qq.com"   #邮箱

3. 安装hexo框架

Hexo官网介绍,安装的命令只需要一条,打开git bash,输入以下命令

npm install hexo-cli -g
# 由于我们先前更换了淘宝源,因此下载速度会很快

$ npm install -g hexo-cli
F:\node\node_global\hexo -> F:\node\node_global\node_modules\hexo-cli\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ hexo-cli@4.2.0
added 65 packages from 334 contributors in 22.328s

这里会报一些warning,但我们不必理会

二、搭建本地博客

1. `hexo`初始化

接下来的命令都是在cmd或git bash窗口完成

在任意路径下新建一个文件夹名，我这里新建blog
在命令行中进入到刚才新建的目录，进行hexo初始化

Administrator@ZHANG-YAFEI MINGW64 /g/programming/blog
$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 188 packages from 440 contributors in 37.415s

15 packages are looking for funding
  run `npm fund` for details

INFO  Start blogging with Hexo!

安装hexo blog所需的依赖包

npm install

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 5 packages from 1 contributor in 8.357s

15 packages are looking for funding
  run `npm fund` for details

2. `hexo`部署本地博客

清空已有hexo网站文件

hexo clean # 清空已有hexo网站文件

生成静态页

hexo generate 或 g  # 依据网页文本与新的CSS样式生成新网站文件

启动本地服务器

hexo server(or s) # 启动本地服务器，可以在localhost:4000查看网站修改效果

$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

依次运行上述三个命令，就可以在浏览器打开localhost:4000端口，查看对应网站界面效果，一般默认的是一个landscape主题，后期当提交新文章或者新的样式修改时，往往都是先从本地查看结果无误后再部署到Gitee Page。

3. 目录结构介绍

.
├── .deploy       # 需要部署的文件
├── node_modules  # 项目所有的依赖包和插件
├── public        # 生成的静态网页文件
├── scaffolds     # 文章模板
├── source        # 博客正文和其他源文件等都应该放在这里
|   ├── _drafts   # 草稿
|   └── _posts    # 文章
├── themes        # 主题
├── _config.yml   # 全局配置文件
└── package.json  # 项目依赖信息

三、主题下载与安装

Hexo官网上提供了丰富的主题可选，你只需要打开对应的界面（https://hexo.io/themes/）选择喜欢的，然后点击名称跳转到GitHub仓库选择下载或者克隆对应的zip文件到本地，并且解压到网站目录下的themes目录即可。

然后接下来，你需要修改两个配置文件：

你的网站根目录下的**_config.yml**文件，即网站配置文件；
你选择的主题的自带配置文件**_config.yml**，即主题样式配置文件；

网站配置文件会配置你网站的URL地址、博客名称以及与Gitee上传的方式等基本信息；而主题样式配置文件则会定义实际页面显示的美观效果、多媒体（声音视频等）以及评论等附加功能。

四、部署博客到Gitee

1. 新建一个仓库

注意：仓库的名称和路径都为码云的用户名

2. 修改博客的配置，并上传到Gitee

npm install hexo-deployer-git --save

修改项目根路径中的_config.yml文件

在博客的根目录下，有一个_config.yml文件，我们使用一些记事本编辑它

#在文件的最底部
deploy:
  type: git
  repo: 仓库URL地址
  branch: master

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@gitee.com:zhangyafeii/zhangyafeii.git
  branch: master