构建个人博客

最新推荐文章于 2024-04-24 09:57:40 发布

浮华落定

最新推荐文章于 2024-04-24 09:57:40 发布

阅读量382

点赞数

分类专栏： hexo

本文链接：https://blog.csdn.net/qiufo/article/details/105294264

版权

hexo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

构建个人博客

Gitee+Hexo搭建个人博客

Hexo、**Hugo**、 **Jekyll**、 **Ghost**都是生成静态网站的框架。
我们先来比较一下：（Github上4个框架的数据来自2019年5月28号）

Github star数量	issues(open)	issues(close)	语言	多语言	收费
Hexo	26.6k	196	2934	JavaScript	支持
Hugo	35.4k	324	3367	Go	不确定
Jekyll	37.8k	196	1934	Ruby	不确定
Ghost	30.0k	82	5310	JavaScript	不确定

从表格可以看出（综合Github star和issues来看）

最活跃的框架是Ghost，没错，因为Ghost是收费的。对于一个只想玩玩的个人开发者来说，我并不建议使用Ghost来搭建个人博客。
Jekyll最受欢迎，并且免费。

Gitee+Hexo搭建个人博客

为何使用Gitee而不是GitHub

目前国内访问GitHub速度慢，还可能被墙，所以Gitee来构建个人博客。Gitee类似国内版的GitHub，访问速度有保证。
环境要求

Git
NodeJs

默认你已经安装了Git和NodeJS(推荐使用cnpm)

开始搭建

1. 安装Hexo

打开 shell 终端，输入命令npm install -g hexo or cnpm install -g hexo。使用cnpm 需要安装淘宝镜像

$  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快。

安装cnpm命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装之后你会发现用cnpm命令会提示找不到，要建立软链接
ln -s /root/node-v9.3.0-linux-x64/bin/cnpm /usr/local/bin/cnpm
此时运行 cnpm -v试试

配置环境变量
ln -s /opt/nodejs/bin/hexo /usr/local/bin/hexo

2. 初始化Hexo

在你的电脑上创建Hexo文件夹，在shell终端中切换到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. 获取博客主题

在shell中输入命令：git clone https://github.com/yelog/hexo-theme-3-hexo

/work/Hexo $ git clone https://github.com/yelog/hexo-theme-3-hexo
Cloning into 'themes/3-hexo'...
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和hexo-theme-3-hexo两个文件夹。
我们所要使用的主题都是放在这个目录下，Hexo默认使用的是landscape主题，由于第二步Hexo初始化时主题没有clone成功，所以我们这一步克隆了hexo-theme-3-hexo主题，接下来会使用hexo-theme-3-hexo主题进行演示。
想获取更多主题，可在网站：https://hexo.io/themes/ 选择自己喜欢的主题，按照此步的步骤clone下来。

更换主题流程：下载主题 -> 配置主题，以 xoxo 为例

# 下载到themes文件夹下
git clone https://github.com/KevinOfNeu/hexo-theme-xoxo xoxo

# 修改 _config.yml 配置
theme: xoxo

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

_config.yml文件修改，保存

# Site
title: 浮华落定
subtitle: ''
description: ''
keywords:
author: Robin jiao
language: en
timezone: ''

5. 本地预览博客

编译项目，输入命令：hexo g
运行项目，输入命令：hexo s

$ hexo g
INFO  Start processing
INFO  Files loaded in 186 ms
INFO  Generated: archives/2018/08/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2018/index.html
INFO  Generated: index.html
INFO  Generated: 2018/08/08/hello-world/index.html
INFO  5 files generated in 242 ms
$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

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

6.部署博客到Gitee

6.1. 创建Gitee账号

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

6.2. 创建项目

创建项目

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

6.3. 在_config.yml中配置Git

deploy:
  type: git
  repo: https://gitee.com/xiaolaifeng/xiaolaifeng.git
  branch: master

注意：冒号后面一定要有空格，否则不能正确识别。

6.4. 发布到Gitee

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

6.5. Gitee Pages设置

在项目的服务中选择Pages选项
Pages

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

稍等一会儿博客就发布成功啦，访问博客地址：https://xiaolaifeng.gitee.io，就可预览在线博客啦！！！
如果博客的样式不对，则需要在_config.yml中配置下博客地址和路径：

url: https://xiaolaifeng.gitee.io/
root: /

再执行命令hexo clean && hexo g && hexo d 就可以啦。

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

6.6 更新gitee博客

每次提交新的博客到gitee后，需要手动点击更新，才能看到效果
在这里插入图片描述

个人博客效果参考：https://xiaolaifeng.gitee.io/

6.8 部署优化

每次都要执行 hexo clean 和 hexo deploy，不如写个新的脚本

// package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "dev": "hexo s",
    "buildall": "hexo clean & hexo deploy"
  },
  "hexo": {
    "version": "4.2.0"
  },

}

部署命令

npm run buildall

7. 如何创建新文章

// [layout] 为布局，可选项为 `post`、`page`、`draft`，这将决定文章所在文件路径。
// <title> 为文章标题
// 如 hexo new post 除了帅气，我还有啥！
hexo new [layout] <title>

实例

$ hexo new post "hello "
INFO  Created: E:\git-workspace\robin.gitee\blog-demo\demo-hexo\source\_posts\hello.md

indexvc@SHDN049 MINGW64 /e/git-workspace/robin.gitee/blog-demo/demo-hexo/themes (master)

在这里插入图片描述

8.创建分类

生成“分类”页并添加type属性

打开命令行，进入博客所在文件夹。执行命令

hexo new page categories

成功后会提示：

INFO  Created: ~/Documents/blog/source/categories/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中，添加后是这样的：

---
title: categories
date: 2020-04-03 16:18:46
type: "categories"
---

保存并关闭文件。
给文章添加“categories”属性

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

---
title: 'redis '
date: 2020-04-03 16:00:35
tags:
categories: 
- redis
- life
---

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

9.创建标签

生成“标签”页并添加type属性

打开命令行，进入博客所在文件夹。执行命令

hexo new page tags

成功后会提示：

INFO  Created: ~/Documents/blog/source/tags/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

---
title: tags
date: 2020-04-03 16:19:59
---

添加type: "tags"到内容中，添加后是这样的：

---
title: tags
date: 2020-04-03 16:19:59
type: tags
---

保存并关闭文件。
给文章添加“tags”属性

打开需要添加标签的文章，为其添加tags属性。下方的tags:下方的- jQuery-表格-表单验证就是这篇文章的标签了

---
title: jQuery对表单的操作及更多应用
date: 2020-04-03 16:19:59
categories: 
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

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

10. 自定义排序

有些博客是成体系的博客，在某一类别下，排序比较混乱，需要按照文章的date排序，比如文章是按照中文的一、二、三等命名，但实际上展现的顺序并不按照此顺序。某些大牛编写了一个npm插件hexo-generator-topindex
可以安装插件

npm install hexo-generator-topindex --save

也可直接修改hexo的js代码
直接上操作，修改node_modules/hexo-generator-index/lib/generator.js

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

设置置顶

给需要置顶的文章加入top参数，如下

---
title: 每天一个linux命令
date: 2017-01-23 11:41:48
top: 1
categories:
- linux
tags:
- linux命令
---

如果存在多个置顶文章，top后的参数越大，越靠前。
References
　　Netcan 的解决Hexo置顶问题

浮华落定

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
构建个人博客

构建个人博客Gitee+Hexo搭建个人博客1. 安装Hexo2. 初始化Hexo3. 获取博客主题4. _config.yml对博客进行基础配置5. 本地预览博客6.部署博客到Gitee6.1. 创建Gitee账号6.2. 创建项目6.3. 在_config.yml中配置Git6.4. 发布到Gitee6.5. Gitee Pages设置6.6 更新gitee博客6.8 部署优化7. 如何创建新...
复制链接

扫一扫