使用Gitee + HEXO搭建个人博客

小灰灰 2022-04-25 09:12 273阅读 0赞

为何使用Gitee而不是GitHub的的上目前国内访问的GitHub上的速度慢，还可能被墙，所以Gitee来构建个人博客.Gitee类似国内版的GitHub上的上，访问速度有保证。

环境要求NodeJS  
默认你已经安装了的Git和的NodeJS（推荐使用CNPM）  
开始搭建  
1.安装Hexo  
打开 shell 终端，输入命令`npm install -g hexo`

$ sudo cnpm install -g hexo
    Password:
    Downloading hexo to /usr/local/lib/node_modules/hexo_tmp
    Copying /usr/local/lib/node_modules/hexo_tmp/_hexo@3.7.1@hexo to /usr/local/lib/node_modules/hexo
    Installing hexo's dependencies to /usr/local/lib/node_modules/hexo/node_modules
    [1/27] abbrev@^1.0.7 installed at node_modules/_abbrev@1.1.1@abbrev
    [2/27] archy@^1.0.0 installed at node_modules/_archy@1.0.0@archy
    [3/27] hexo-i18n@^0.2.1 installed at node_modules/_hexo-i18n@0.2.1@hexo-i18n
    [4/27] js-yaml@^3.6.1 existed at node_modules/_js-yaml@3.12.0@js-yaml
    [5/27] bluebird@^3.4.0 installed at node_modules/_bluebird@3.5.1@bluebird
    [6/27] chalk@^2.3.1 installed at node_modules/_chalk@2.4.1@chalk
    [7/27] hexo-front-matter@^0.2.2 installed at node_modules/_hexo-front-matter@0.2.3@hexo-front-matter
    [8/27] minimatch@^3.0.4 installed at node_modules/_minimatch@3.0.4@minimatch
    [9/27] pretty-hrtime@^1.0.2 installed at node_modules/_pretty-hrtime@1.0.3@pretty-hrtime
    [10/27] hexo-util@^0.6.3 installed at node_modules/_hexo-util@0.6.3@hexo-util
    [11/27] hexo-cli@^1.1.0 installed at node_modules/_hexo-cli@1.1.0@hexo-cli
    [12/27] resolve@^1.5.0 installed at node_modules/_resolve@1.8.1@resolve
    [13/27] strip-indent@^2.0.0 installed at node_modules/_strip-indent@2.0.0@strip-indent
    [14/27] strip-ansi@^4.0.0 installed at node_modules/_strip-ansi@4.0.0@strip-ansi
    [15/27] text-table@^0.2.0 installed at node_modules/_text-table@0.2.0@text-table
    [16/27] tildify@^1.2.0 existed at node_modules/_tildify@1.2.0@tildify
    [17/27] titlecase@^1.1.2 installed at node_modules/_titlecase@1.1.2@titlecase
    [18/27] moment@^2.19.4 installed at node_modules/_moment@2.22.2@moment
    [19/27] moment-timezone@^0.5.14 installed at node_modules/_moment-timezone@0.5.21@moment-timezone
    [20/27] hexo-log@^0.2.0 installed at node_modules/_hexo-log@0.2.0@hexo-log
    [21/27] swig-extras@0.0.1 installed at node_modules/_swig-extras@0.0.1@swig-extras
    [22/27] lodash@^4.17.5 installed at node_modules/_lodash@4.17.10@lodash
    [23/27] cheerio@0.22.0 installed at node_modules/_cheerio@0.22.0@cheerio
    fsevents@1.2.4 download from binary mirror: {"module_name":"fse","module_path":"./lib/binding/{configuration}/{node_abi}-{platform}-{arch}/","remote_path":"./v{version}/","package_name":"{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz","host":"https://cdn.npm.taobao.org/dist/fsevents"}
    [24/27] nunjucks@^3.1.2 installed at node_modules/_nunjucks@3.1.3@nunjucks
    [25/27] swig-templates@^2.0.2 installed at node_modules/_swig-templates@2.0.2@swig-templates
    [26/27] hexo-fs@^0.2.0 installed at node_modules/_hexo-fs@0.2.3@hexo-fs
    [27/27] warehouse@^2.2.0 installed at node_modules/_warehouse@2.2.0@warehouse
    execute post install 2 scripts...
    [1/2] scripts.postinstall nunjucks@^3.1.2 run "node postinstall-build.js src"
    [1/2] scripts.postinstall nunjucks@^3.1.2 finished in 109ms
    [2/2] scripts.install hexo-fs@0.2.3 › chokidar@1.7.0 › fsevents@^1.0.0 run "node install"
    [fsevents] Success: "/usr/local/lib/node_modules/hexo/node_modules/_fsevents@1.2.4@fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
    Pass --update-binary to reinstall or --build-from-source to recompile
    [2/2] scripts.install hexo-fs@0.2.3 › chokidar@1.7.0 › fsevents@^1.0.0 finished in 306ms
    deprecate titlecase@^1.1.2 no longer maintained
    Recently updated (since 2018-08-01): 1 packages (detail see file /usr/local/lib/node_modules/hexo/node_modules/.recently_updates.txt)
     2018-08-06
       → resolve@1.8.1 › path-parse@^1.0.5(1.0.6) (14:32:36)
    All packages installed (280 packages installed from npm registry, used 4s, speed 1.65MB/s, json 236(1.51MB), tarball 5.8MB)
    [hexo@3.7.1] link /usr/local/bin/hexo@ -> /usr/local/lib/node_modules/hexo/bin/hexo

注：如果提示权限错误，命令前加sudo的，CNPM是淘宝的开源镜像，访问国内比NPM快。

2.初始化Hexo 你在电脑的上创建³³Hexo文件夹数，在外壳中终端到e月刊Hexo目录，输入命令`hexo init`

$ cd /work/Hexo 
    /work/Hexo $ hexo init
    INFO  Cloning hexo-starter to /work/Hexo
    Cloning into '/work/Hexo'...
    remote: Counting objects: 65, done.
    remote: Total 65 (delta 0), reused 0 (delta 0), pack-reused 65
    Unpacking objects: 100% (65/65), done.
    Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
    Cloning into '/work/Hexo/themes/landscape'...
    ^Cwarning: Clone succeeded, but checkout failed.
    You can inspect what was checked out with 'git status'
    and retry the checkout with 'git checkout -f HEAD'
    
    INFO  See you again

完成初始化后Hexo的目录结构：初始化后目录结构3.获取博客主题在外壳中输入命令：

`git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even`

/work/Hexo $ git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even
    Cloning into 'themes/even'...
    remote: Counting objects: 136, done.
    remote: Compressing objects: 100% (123/123), done.
    remote: Total 136 (delta 4), reused 128 (delta 2)
    Receiving objects: 100% (136/136), 264.27 KiB | 556.00 KiB/s, done.
    Resolving deltas: 100% (4/4), done.

克隆完成后，在/Hexo/themes目录下，看到可以landscape状语从句：even两个文件夹数。  
我们所要使用的主题都是放在这个目录下，HEXO使用默认的英文的landscape主题，由于第二步HEXO初始化时主题没有克隆成功，所以我们这一步克隆了even主题，接下来会使用even主题进行演示。  
想获取更多主题，可在网站：https：//hexo.io/themes/ 选择自己喜欢的主题，按照此步的步骤克隆下来。

## . \_config.yml对博客进行基础配置 ##

\_config.yml文件修改，保存  
\_config.yml

5.本地预览博客编译项目，

输入命令：

hexo g

运行项目，

输入命令：hexo s

$ hexo g INFO开始处理INFO在186 ms内加载的文件INFO生成：archives / 2018/08 / index.html INFO生成：archives / index.html INFO生成：archives / 2018 / index.html INFO生成：index.html INFO生成：2018/08/08 / hello-world / index.html INFO 5文件生成242 ms $ hexo s INFO开始处理INFO Hexo运行在http：// localhost：4000 / 。按Ctrl + C停止。

在浏览器中输入`http：// localhost：4000 /` \`就可以看到效果啦

部署博客到Gitee上1.创建Gitee账号到码云：HTTPS：//gitee.com/上申请注册账号，码云类似国内版的GitHub的，所以操作界面跟GitHub的差不多，多了一些国产化的东西，这里不做更多介绍了，自己研究下。

2.项目创建³³ 创建³³项目

创建完成后，在项目中复制项目地址。

3.在\_config.yml中配置Git deploy： type：git repo：https ：//gitee.com/xiuxiuing/blog.git branch：master 注意：冒号后面一定要有空格，否则不能正确识别。

4.发布到Gitee 命令输入侧npm install hexo-deployer-git --save安装自动部署工具发布输入侧命令hexo clean && hexo g && hexo d发布博客，首次发布需要在外壳中输入账号和密码。

1.  Gitee Pages设置在项目的服务中选择页面选项网页

选择主分支，点击部署/更新部署

稍等一会儿博客就发布成功啦，访问博客地址：HTTPS：//xiuxiuing.gitee.io/blog，就可预览在线博客啦！如果博客的样式不对，则需要在\_config.yml中配置下博客地址和路径：url：https ：//ysygitee.gitee.io/blog/ root：/ blog 执行再命令hexo clean && hexo g && hexo d就可以啦。

至此，我们的博客就搭建完成啦！在/ HEXO /源/ \_posts目录下就可以写我们的博客啦！

\[ 个人博客效果参考 \]（[https://ysygitee.gitee.io/blog/）][https_ysygitee.gitee.io_blog]

下一主题HEXO有很多开源的主题，我选了下一页，开始只是觉得很简洁清爽，后来发现它的功能挺齐全的，提前解决了很多搭建过程中会遇到的问题。这里强烈推荐一下。

安装我是用的git clone的方法，文档中还有其他方法

$ git clone [https://github.com/theme-next/hexo-theme-next][https_github.com_theme-next_hexo-theme-next] 设置主题在hexo根目录下的配置文件config.yml里设置主题

主题：下一个配置主题接下来我们就可以来按需配置主题内容了，所有内容都在themes / next文件夹下的config.yml文件里修改。

官方文档里写的是有些配置需要将一部分代码添加到配置文件中，但其实不用，我们逐行看配置文件就会发现，有很多功能都已经放在配置文件里了，只是注释掉了，我们只需要取消注释，把需要的相关信息补全即可使用

菜单栏菜单原生菜单栏有主页，关于，分类，标签等数个选项，但是在配置文件中是注释掉的状态，这里我们自行修改注释就行

菜单： 主页：/ || 家

＃about：/ about / || 用户  
标签：/ tags / || 标签 类别：/ categories / || 个 档案：/档案/ || 档案

＃schedule：/ schedule / || 日历  
\#sitemap：/sitemap.xml || 网站地图  
\#commonweal：/ 404 / || 心跳  
注意点：

如果事先没有通过HEXO新页<页面名称>来创建页面的话，即使在配置文件中取消注释，也。页面显示没法我们也。可以添加自己想要添加的页面，局限不用在配置文件里提供的选择里| |后面是fontAwesome里的文件对应的名称menu\_icons记得选启用：true（默认应该是真）我在这部分添加了两个自定义的页面，后面在第三方插件部分我会再提到。

`menu： home：/ || home ＃about：/ about / || 用户 标签：/ tags / || 标签 类别：/ categories / || th 读书：/ books || 书 电影：/ movies || 电影 档案：/档案/ || archive ＃schedule：/ schedule / || calendar ＃sitemap：/sitemap.xml || sitemap #commonweal:/ 404 / || 心跳`

主题风格scheme 主题提供了4个，我们把想要选择的取消注释，其他三个保持注释掉的状态即可。

图像20180809165023401 选择主题后也可以自定义，不过我还没摸清楚有哪些地方可以自定义，等弄清楚了我再来更新。

建站底部时间状语从句：图标种植修改修改主题的配置文件：

footer：
      ＃指定网站设置的日期。
      ＃如果未定义，将使用当前年份。
      since：2018   ＃年份和版权信息之间的图标。  icon：snowflake-o   ＃如果没有定义，将使用来自Hexo主配置的`author`。  版权：  ＃----------------------------------------------- --------------   #Hexo链接（由Hexo提供支持）。  powered：假  主题：    #Theme＆scheme info link（主题 -  NexT.scheme）。    enable：false     ＃方案信息后的NexT版本信息（vX.XX）。    #version：false```
    
    
    我在这部分做了这样几件事：
    
    把用户的图标从小人user改成了雪花snowflake-o
    copyright留空，显示成页面author即我的名字
    powered: false把hexo的授权图片取消了
    theme: enable:false 把主题的内容也取消了
    这样底部信息比较简单。
    
    image-20180809172835606
    个人社交信息 social
    在social里我们可以自定义自己想要在个人信息部分展现的账号，同时给他们加上图标。

social:  
GitHub: [https://github.com/XuQuan-nikkkki][https_github.com_XuQuan-nikkkki] || github  
E-Mail: [mailto:xuquan1225@hotmail.com][mailto_xuquan1225_hotmail.com] || envelope  
\#Google: [https://plus.google.com/yourname][https_plus.google.com_yourname] || google  
\#Twitter: [https://twitter.com/yourname][https_twitter.com_yourname] || twitter  
\#FB Page: [https://www.facebook.com/yourname][https_www.facebook.com_yourname] || facebook

注意点：
    
    ||后面对应的名称是fontAwesome里图标的名称，如果我们选择的账号没有对应的图标（如豆瓣、知乎），我们可以在fontAwesome库里去选择自己喜欢的图标
    建议不要找太新的fontAwesome图标，主题关联的库版本没有那么新，很可能显示不了或者显示一个地球
    网站动画效果
    为了网站响应速度我们可以把网站的动画关掉

\`  
motion:  
enable: false  
但我觉得页面比较素，所以开了动画，选择了canvas-nest这一个，主题自带四种效果，可以选自己喜欢的。

motion： enable：true async：true\`motion： enable：false 但我觉得页面比较素，所以开了动画，选择了canvas-nest这一个，主题自带四种效果，可以选自己喜欢的。

motion： enable：true async：true

# Canvas-nest #

canvas\_nest：是的

＃three\_waves  
three\_waves：false

＃canvas\_lines  
canvas\_lines：false

\#canvas\_sphere canvas\_sphere：假``。评论系统下一个原生支持多说，Disqus，hypercomments等多种评论系统我选择了如何方法也非常简单直接去寻求注册，注册完了在配置的时候会给你一个名对于短名称的ID，将这个ID填在配置文件里即可。＃Disqus disqus：enable：true shortname：xuquan count：true统计文章字数和阅读时间post\_wordcount：item\_text：true wordcount：true＃文章字数min2read：true＃阅读时间totalcount：true＃总共字数separated\_meta：true统计阅读次数这里我用的是leancloud的服务，具体方法参考NexT上的教程，添加完之后效果如下：image-20180809175133462第三方插件Hexo-admin Hexo-admin插件允许我们直接在本地页面上修改文章内容。下载npm i hexo-admin --save登录

HTTP：//本地主机：4000 /管理员即可看到我们所有的文章内容，并且在可视化界面中操作文章内容

## Hexo-douban hexo-douban插件 ##

> 可以在博客中添加豆瓣电影，读书和游戏页面，关联我们自己的账号。

下载

npm install hexo-douban --save配置

在HEXO根目录下的config.yml文件中添加如下内容

douban：user：builtin：false book：title：'这是我的书名’引用：'这是我的书引用’电影：标题：'这是我的电影标题’引用：‘这是我的电影引用’游戏：标题：’ 这是我的游戏标题 ‘引用：’ 这是我的游戏引用’超时：10000标题和引用后面的内容会分别作为电影/读书/游戏页面的标题和副标题（引言）呈现在博客里。

用户就写我们豆瓣的ID，可以在“我的豆瓣”页面中找到，内置指是否将生成页面功能嵌入己和生成页面功能嵌入很长时间生成豆瓣页面，长到怀疑人生。

生成页面

hexo douban＃生成读书，电影，游戏三个页面hexo douban -b＃生成读书页面hexo douban -m＃生成电影页面hexo douban -g＃生成游戏页面在博客中生成页面

这里就需要用到我们前面提过的hexo new命令了。

HEXO新页面书籍HEXO新页面电影HEXO新页面游戏在博客中添加页面

在菜单部分添加我们需要添加的页面名称和相对路径

菜单：主页：/档案馆：/档案书籍：/书籍＃这是你的书页电影：/电影＃这是你的电影页面游戏：/游戏＃此是你的游戏页面部署到博客

hexo g && hexo deploy

# 参考 #

[https://www.jianshu.com/p/21c94eb7bcd1][https_www.jianshu.com_p_21c94eb7bcd1]

[https_ysygitee.gitee.io_blog]: https://ysygitee.gitee.io/blog/%EF%BC%89
[https_github.com_theme-next_hexo-theme-next]: https://github.com/theme-next/hexo-theme-next
[https_github.com_XuQuan-nikkkki]: https://github.com/XuQuan-nikkkki
[mailto_xuquan1225_hotmail.com]: mailto:xuquan1225@hotmail.com
[https_plus.google.com_yourname]: https://plus.google.com/yourname
[https_twitter.com_yourname]: https://twitter.com/yourname
[https_www.facebook.com_yourname]: https://www.facebook.com/yourname
[https_www.jianshu.com_p_21c94eb7bcd1]: https://www.jianshu.com/p/21c94eb7bcd1