搭建个人博客详细教程

基于gitee+hexo搭建个人博客

由于国外的github page访问总是非常慢的，本文选择国内开源代码托管平台码云，因而可以在国内搭建访问与SEO检索都优于GitHub的个人网站。自己亲手勉强搭起个人博客，首先感谢木千之博主的详细教程，给了清晰的思路，写下这篇博客将详细过程记录，希望帮助更多的人，减少搭建过程中的坑，也希望可以为其他选择使用Gitee+Hexo搭建个人博客的亲们提供帮助。

总体的思路

总体的思路是在本地利用Hexo框架搭建一个静态网站，然后将项目推送到码云上，通过配置Gitee Page，即可根据Gitee Page网址地址进行访问，如果显域名不好看可以在阿里云或者腾讯云上购买自定义域名（需要本案，过程还是挺麻烦的，自己买了也没用）。Hexo官网地址（https://hexo.io/zh-cn/docs/），Gitee官网地址(https://gitee.com/)，阿里云购买域名。

一、环境配置

由于我们选择在Windows10平台上使用Gitee+Hexo来搭建个人博客，且网站/博客本质上是一个资源目录，其中包含了显示的页面文本与调用的样式（CSS等）文件，因此我们需要首先在本地建立一个存储个人网站的目录，如命名为MyWeb。
接下来，我们就需要安装两个重要的环境，一个是提供版本克隆与下载追踪的git，一个是由文本文件生成HTML文件的Hexo框架，注：如果有这两个工具可以直接跳过。

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

上述安装下载后按照指示安装即可，安装成功在MyWeb中单击空白右键，应能弹出启动Git Bash Here的选项。

二、Hexo的安装与基本命令的使用

接下来我们可以安装生成网站的关键——Hexo架构了，其主要信息和安装命令、主题等都可以从其官网轻松得到：https://hexo.io/zh-cn/

为了安装Hexo，只需要在MyWeb目录中单击右键启动Git Bash Here，然后输入命令：

npm install hexo-cli -g

网上有很多其他的命令，建议一切以官网命令为依据，由于时间版本原因，很有可能未来的命令发生改变而失效。

然后等待几分钟（取决于你的网速），完成后需要首先进行初始化在本地生成Hexo相关目录：

hexo init

然后就可以使用Hexo三连了，即我们最常用的三个主要命令（依旧在上述Git Bash命令端口中）：

hexo clean # 清空已有hexo网站文件
hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件
hexo server(or s) # 启动本地服务器，可以在localhost:4000查看网站修改效果

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

三、主题下载与安装

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

下图中则是我网站中的主题文件，请注意网站的路径：

在这里插入图片描述

然后接下来，你需要修改两个配置文件：
你的网站根目录下的_config.yml文件，即网站配置文件；
你选择的主题的自带配置文件_config.yml，即主题配置文件； 网站配置文件会配置你网站的URL地址、博客名称以及与Gitee上传的方式等基本信息；而主题配置文件则会定义实际页面显示的美观效果、多媒体（声音视频等）以及评论等附加功能。

四、网站配置文件修改

关于网站配置文件修改很简单，但是并不容易，因为一不小心就会出现域名带来的访问错误，在开始修改网站配置文件前，我建议大家先去Gitee上注册登录新建一个仓库用来保存你未来展示的个人博客页面、样式等资源，关于名称，很多网上教程都说可以自定义，然后在配置文件中正确指定即可，然而这里自己遇到了第一个坑：
坑一：新建仓库与Gitee不同名导致无法正确解析
网站配置文件采用文本样式打开后，可以找到下面一段代码：

url: http://mr-rangerover.gitee.io/ #填写自己Gitee Page的网站地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:trailing_index: true # Set to false to remove trailing 'index.html' from permalinkstrailing_html: true # Set to false to remove trailing '.html' from permalinks

上述说明中提到可以自定义名称，只需要在root字段修改即可，然而这里有两个容易出问题的地方：

你的URL并不是你所在仓库的地址，而应该是你启动仓库的Gitee Page服务后分配给你的网站静态域名，以我个人为例，仓库地址为：https://gitee.com/mr-rangerover/mr-rangerover.git（我新建的网站名称与Gitee账号同名），而网站URL应为“服务–Gitee Page”启动/更新后显示的网站地址：http://mr-rangerover.gitee.io
你的网站目录当然可以和账户不同名，但是那样就需要按照文档说明修改root字段，自己当初定义的名称不同，结果导致域名莫名无法解析，总是无法正确访问网页，因此干脆像GitHub Page一样强制要求使用账号同名新建网站仓库，这样还获得了以账号名为特征的独有域名，一举两得！

跳过了上面的坑，接下来需要制定网站采用的主题样式，这里也需要注意：主题文件解压缩后不要重命名，直接将主题文件名称复制后设置为网站主题，即

#博客样式
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: hexo-theme-pure-master #填写自己的样式文件夹的名字

坑二：Git部署目录不是仓库地址
网站配置文件修改

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:type: gitrepository: git@gitee.com:mr-rangerover/mr-rangerover.gitbranch: master

注意上面的repository地址并不是仓库的地址，而是你下载/克隆项目时弹出的那个地址，如果使用git就选择SSH
在这里插入图片描述

跳过了上面两个坑，后面就比较简单了，你需要仔细阅读主题文件下的README.md文件以根据主题特点实现自定制网站。在此之前，你还需要在网站的Git Bash中运行一次安装所有主题依赖插件包的命令：

npm install
npm install --save hexo-deployer-git   #为之后做准备，不装会报错：ERROR Deployer not found: git

完成之后可以执行三行命令将本地静态资源push到码云

hexo clean    #清理
hexo g        #生成静态资源
hexo d        #将本地资源提高到码云

坑三、Gitee端的更新
其实这也算一个小坑吧，一般而言理解一旦运行了hexo deploy(or d)应该就已经将新的网站文件（主要是网站目录下的public目录）上传到了Gitee，然而事实上上步之后直接访问网站URL会发现页面没有改变，原因在于：你、没有、更新！是的，对于免费Gitee用户而言，你会需要手动更新一下Gitee Page，然后才可以将修改真的“部署”到可访问的网站上。折腾了我好久

只需要再次点击【更新】稍等片刻即可，完成部署后，点击网站地址可以查看个人博客。如果远程页面和本地页面有出入，可以点击刷新 F5或者shift+F5

在这里插入图片描述

五、末尾

上述过程记录了一般采用Gitee+Hexo搭建个人博客的过程，除了跳过几个“坑”之外，还需要认真阅读主题目录下的README.md文件，以进一步修改页面的索引、标签、图片风格等具体样式。

好了，到此为止，你已经有了一个初步的个人博客，剩下的是根据需要添加不同插件或者调整风格了。

祝愿大家都能有一个属于自己的个人博客，感兴趣的朋友可以随时联系我，也可以访问我的个人网站 http://mr-rangerover.gitee.io

如果存在问题请同学给予指正，谢谢。

附属技巧

一、宠物插件

在这里插入图片描述
输入命令利用npm安装相关包

在MyWeb目录中单击右键启动Git Bash Here，然后输入命令：

npm install hexo-helper-live2d
npm install live2d-widget-model-hijiki

在MyWeb目录下，配置_config.yml，找到deploy，添加以下代码

#修改部署方式
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:type: git#控制宠物样式和状态
live2d:enable: truescriptFrom: localpluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径tagMode: false # 标签模式, 是否仅替换 live2dtag标签而非插入到所有页面中log: false model:use: live2d-widget-model-hijikidisplay:position: rightwidth: 150height: 300mobile:show: true # 是否在移动设备上显示react:opacity: 0.7