0%

hexo+码云搭建个人博客

前言:不知什么时候开始就有了自己搭建个人博客的想法,但由于时间关系还是拖到了现在。看了些文章后感觉搭建个人博客也就那样应该很简单,但实际操作时却总会给我们意想不到的惊喜。于是乎我选择了记录这个过程,以免以后遇到相同问题不会解决。

一、我为什么选择hexo+码云来搭建自己的博客

  1. 选择hexo完全是因为我只对它有过些了解,且它有很多的主题可供选着。
  2. 选着码云因为码云作为国内网站,访问速度自然是比Github快一些,且更容易被SEO收录提升博客的曝光率。

二、具体操作步骤

  1. 先安装好Git和Node.js。(很简单的,实在不会可以百度教程也多)
  2. 接下来就可以安装我们的hexo了(全局安装),可以使用cmd命令行,输入以下命令:
    1
    npm install -g hexo-cli
  3. 指定一个文件夹来存放网站文件(也就是网站的根目录)
    1
    2
    3
    hexo init mayi077  #在这个地址里生成Hexo初始化文件
    cd mayi077 # 进入这个文件夹
    npm install # 在文件夹内自动安装Hexo所依赖的各种模块(实际上我没有进行这一步)
      经过以上3步,Hexo就初始化成功了,下面我们进行一下本地测试.
  4. 生成静态页面
    1
    hexo generate    或使用缩写  hexo g
  5. 本地测试:开启服务器
    1
    hexo server    或使用缩写   hexo  s
     当返回如下代码时说明开启成功:
    1
    2
    INFO  Start processing
    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
     简单的5步,一个最原始的本地Hexo博客就已经搭建好了。浏览器输入http://localhost:4000 就可以看到我们的博客。
    1
    2
    3
    4
    5
    6
    node_modules:为hexo的插件目录,作用是利用此目录的插件生成
    对应功能的静态HTML等脚本代码。
    scaffolds:模版文件。可以在这里添加自己的layout,作为常用的新建模板使用。
    source:这个文件夹是放文章和图片等资源文件的。
    themes:存放主题的文件夹
    _config.yml:站点配置文件,很多全局配置都在这个文件中。

三、应用一个自己喜欢的主题

  1. 可以去官网 https://hexo.io/themes/ 找一个自己喜欢的主题。(也可去其它途径寻找)
  2. 将主题下到本地。可以在指定文夹内使用git clone 文件地址 也可以下载压缩包后进行解压。这里要求解压到网站根目录(D:/mayi077/themes)下的themes文件夹下。
  3. 更改网站根目录下的_config.yml文件。将themes后面的改为自己主题文件夹的名称,注意前面有一个空格。
  4. 这就把主题应用成功了,然后就是改主题了,把主题的一些信息改成自己的,一些容易搞错的地方我们后面再仔细讲。
  5. 运行
    1
    2
    hexo clean    ##清除缓存
    hexo s ## 开启服务
    然后就可以进行查看了。

注意: 更改主题里的配置文件不需要重启而更改网站根目录下的配置文件基本都需要重启服务

四、部署到码云

  1. 首先就是注册一个码云账号,注意账号名,它将会影响你以后的域名。
  2. 新建一个仓库,选择公开,选择 使用readme文件初始化这个仓库(名字随意其它默认)如图:
  3. 复制仓库链接,然后更改网站的配置文件(网站根目录下的_config.yml文件)
    1
    2
    3
    4
    deploy:
    type: git
    repository: 复制的链接(注意前面有个空格)
    branch: master

  4. 使用
    1
    2
    3
    hexo clean ##清除缓存
    hexo g ##生成静态文件
    hexo d ## 部署到码云
    第一次使用的话先:
    1
    npm install hexo-deployer-git --save  ##安装deployer
    再执行上面命令。
    之后会弹出一个对话框,让我们输入码云的帐号和密码(我们可以配置网站的SSH,这样就不用每次都输入账号密码了)
  5. 到码云上启用这个模块,服务->gitee pages 勾选强制使用HTTPS后点击启用服务即可(它会返回一个地址,那就是你的网站地址)
  6. 再到网站的配置文件里更改url为刚刚得到的网址,root后面改为仓库名如:

五、添加“分类”及“标签”

  1. 创建“分类”选项
    打开命令行,进入博客所在文件夹。执行命令:
    1
    hexo new page categories
     成功后会在source/categories/生成一个index.md文件添加type: “categories”到文件内容中,添加后是这样的:
    1
    2
    3
    4
    5
    ---
    title: 文章分类
    date: 2017-05-27 13:47:40
    type: "categories"
    ---
    保存并关闭文件。

接下来给文章添加“categories”属性
 打开需要添加分类的文章,为其添加categories属性。
下方的categories: web前端表示添加这篇文章到“web前端”这个分类。
注意:hexo一篇文章只能属于一个分类,也就是说如果在“- web前端”下方添加“-xxx”,hexo不会产生两个分类,
而是把分类嵌套(即该文章属于 “- web前端”下的 “-xxx ”分类)。

1
2
3
4
5
6
---
title: mayi077
date: 2020-01-11 12:12:57
categories:
- web前端
---

 至此,成功给文章添加分类,点击首页的“分类”可以看到该分类下的所有文章。
当然,只有添加了categories: xxx的文章才会被收录到首页的“分类”中。
2. 创建“标签”选项
生成“标签”页并添加tpye属性
打开命令行,进入博客所在文件夹。执行命令

1
hexo new page tags

 成功后会生成source/tags/index.md添加type: “tags”到内容中,添加后是这样的:

1
2
3
4
5
---
title: mayi077
date: 2020-01-11 12:47:40
type: "tags"
---

 保存并关闭文件。
给文章添加“tags”属性
 打开需要添加标签的文章,为其添加tags属性。

1
2
3
4
5
6
7
8
9
10
---
title: mayi077
date: 2020-01-11 12:12:57
categories:
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

 至此,成功给文章添加分类,点击首页的“标签”可以看到该标签下的所有文章。当然,只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

六、常见问题及解决方法

  1. 主题应用后无法正常显示。
    这要看使用的主题具体的说明文件,看是否需要提前安装一些插件,安要求安装及可。
  2. 更改主题的底端文字
    首先我们找到这个主题的文件夹,进入layout –> _partial –> footer.swig 进入后进行对应的更改及可。
  3. 添加新文章,使用如下代码:
    1
    hexo new "文章名"  ##新建一个文章在hexo所在目录 -> source -> _posts下
     之后再找到该文件并进行相应的更改
     之后就是上传到码云上了。(当然在此之前先要在本地看看是否满意)
    1
    2
    hexo g   #生成静态页面文件
    hexo d #发布到码云
    到码云上更新如:
    图片.png
    可能不会立即生效,需要稍微等等。
  4. 博客无法直接 上传图片,这里我推荐几个自己在用的图床网址
    1
    2
    3
    https://sm.ms/
    https://www.superbed.cn/
    需要用图片时可以先把图片上传然后复制起markdown链接里直接引用
  5. 文章中的链接需要是正确的否者可能会报错,也就是说注意链接前后的空格。

-------------本文结束感谢您的阅读-------------