欢迎光临
我的个人博客网站

Hexo+Gitee搭建个人博客

Hexo+Gitee搭建个人博客

Hexo+Gitee搭建个人博客

文章源地址(点击跳转)

(一)前言

  • beacuse(事出有因):

    很久之前就知道Hexo搭建个人博客,但由于懒,一直没有行动,在此之前一直用的是博客园。

  • but(但是):

    今天打开博客园,发现网站进行整改,导致之前的博客无法查看,也无法发布新博客。

    Hexo+Gitee搭建个人博客

  • so(因此):

    本着自己动手,丰衣足食的原则,废话不多说,开始搭建自己专属的个人博客网站。

  • why(为什么选择Hexo+Gitee):

    • Hexo官方网站提供详细的中文文档,可以帮助我们快速搭建个人博客。

    • GitHub的镜像在国外,访问速度会受到限制,当然也可以通过CDN加速,这里使用Gitee就不用担心限速问题了。

(二)前期准备

2.1 注册Gitee账号并创建一个仓库

这里建议仓库的名称跟Gitee账号的用户名一致,这样后面生成的网站地址就没有二级目录,要短一些。

Hexo+Gitee搭建个人博客

2.2 开启Gitee Page服务

Hexo+Gitee搭建个人博客

开启后如下图所示可以看到生成的网站地址:

Hexo+Gitee搭建个人博客

2.3 安装node.js

官网:https://nodejs.org/en/

Node.js 的版本不低于 8.10,这里建议使用 Node.js 10.0 及以上版本。

Hexo+Gitee搭建个人博客

下载完安装即可(安装很简单Next –> Next就可以):

Hexo+Gitee搭建个人博客

检查node.js是否安装成功,win+r打开cmd命令行界面,分别输入node -vnpm -v

C:UsersDELL>node -v v15.12.0  C:UsersDELL>npm -v 7.6.3 

由于npm默认的镜像是在国外,速度慢且可能出现异常,所以我们需要更换源镜像,这里替换成淘宝镜像:

  • 查看镜像源:npm get registry

    C:UsersDELL>npm get registry https://registry.npm.taobao.org/ 
  • 修改镜像源:npm config set registry https://registry.npm.taobao.org

    C:UsersDELL>npm config set registry https://registry.npm.taobao.org  C:UsersDELL>npm get registry https://registry.npm.taobao.org/ 

2.4 安装Git

官网地址:http://git-scm.com/

2.5 安装Hexo

所有必备的应用程序安装完成后,即可使用npm命令安装Hexo:npm install -g hexo-cli

C:UsersDELL>npm install -g hexo-cli  added 66 packages in 3s 

2.6 建站

在电脑中创建一个文件夹用来存放博客,如:F:blog 之后的命令行操作都在这个文件夹的目录下进行。

生成默认博客:hexo init

F:blog>hexo init INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git INFO  Install dependencies INFO  Start blogging with Hexo! 

目录结构:

Hexo+Gitee搭建个人博客

本地启动:hexo s

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

打开浏览器输入:http://localhost:4000,看到如下画面说明建站成功:

Hexo+Gitee搭建个人博客

(三)提交到Gitee上

打开根目录/blog下的_config.yml文件

修改以下代码:

deploy:   type: git   repo: https://gitee.com/cai_hesheng/cai_hesheng.git   #将地址换成自己的地址   branch: master 

安装部署插件:

F:blog>npm install hexo-deployer-git --save  added 7 packages in 1s 

清理缓存:hexo clean

生成静态文件:hexo g

F:blog>hexo g INFO  Validating config INFO  Start processing INFO  Files loaded in 108 ms ...  INFO  Generated: js/jquery-3.4.1.min.js INFO  Generated: css/fonts/fontawesome-webfont.svg INFO  17 files generated in 627 ms 

推送到Gitee:hexo d Gitee的用户名/邮箱 密码

F:blog>hexo d ********* ************* INFO  Validating config INFO  Deploying: git ... Branch 'master' set up to track remote branch 'master' from 'https://gitee.com/cai_hesheng/cai_hesheng.git'. INFO  Deploy done: git 

打开Gitee仓库,可以看到我们推送成功的静态文件的目录结构:

Hexo+Gitee搭建个人博客

再次修改根目录下的_config.yml文件:

# URL ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project' url: https://cai_hesheng.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 permalinks   trailing_html: true # Set to false to remove trailing '.html' from permalinks 

更新Gitee Pages,每次修改博客内容后都需要做以下操作:

  • hexo clean

  • hexo g

  • hexo d

  • 更新Gitee Pages服务

Hexo+Gitee搭建个人博客

打开浏览器输入地址:https://cai_hesheng.gitee.io/,看到如下画面,说明提交成功:

Hexo+Gitee搭建个人博客

(四)装修博客

4.1 下载主题

这里使用到了前面安装的git命令,通过命令来克隆主题文件。

切换到themes目录,右键单击,选择Git Bash Here:

Hexo+Gitee搭建个人博客

输入命令:git clone https://gitee.com/yafine66/hexo-theme-matery.git

$ git clone https://gitee.com/yafine66/hexo-theme-matery.git Cloning into 'hexo-theme-matery'... remote: Enumerating objects: 4860, done. remote: Counting objects: 100% (4860/4860), done. remote: Compressing objects: 100% (2021/2021), done. remote: Total 4860 (delta 3200), reused 4179 (delta 2775), pack-reused 0 Receiving objects: 100% (4860/4860), 14.50 MiB | 1.51 MiB/s, done. Resolving deltas: 100% (3200/3200), done. 

4.2 切换主题

  • 修改根目录下的 _config.ymltheme 的值:theme: hexo-theme-matery

  • 修改两个 per_page 的分页条数值为 6 的倍数,如:1218 等,这样文章列表在各个屏幕下都能较好的显示。

  • 中文用户,建议修改 language 的值为 zh-CN

4.3 新建菜单页

分类categories页、标签tags页、关于我about页(这里演示categories,其他类似创建):

categories 页是用来展示所有分类的页面,如果 source 目录下还没有 categories/index.md 文件,那么就需要新建一个,命令如下:

hexo new page "categories" 

编辑你刚刚新建的页面文件 /source/categories/index.md,至少需要以下内容:

--- title: categories date: 2018-09-30 17:25:30 type: "categories" layout: "categories" --- 

4.4 其他样式配置

更多样式的配置在hexo-theme-matery_config.yml中修改。

(五)新建文章

输入命令:hexo new '文章名'

F:blog>hexo new 'Hexo+Gitee搭建个人博客' INFO  Validating config INFO  Created: F:blogsource_postsHexo-Gitee搭建个人博客.md 

Front-matter 选项中的所有内容均为非必填的。但仍然建议至少填写 titledate 的值。

配置选项 默认值 描述
title Markdown 的文件标题 文章标题
date 文件创建时的日期时间 发布时间,应保证全局唯一
author _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图
top true 文章是否置顶,值为 true,则会作为首页推荐文章
cover false 是否需要加入到首页轮播封面中
coverImg 该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片
password 文章阅读密码,该值必须是用 SHA256 加密后的密码,防止被他人识破。
toc true 是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。
mathjax false 是否开启数学公式支持
summary 文章卡片摘要显示的文字,如果无值程序会自动截取文章的部分内容作为摘要
categories 文章分类,建议一篇文章一个分类
tags 文章标签,一篇文章可以多个标签

(六)参考

(七)补充

Hexo默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改,URL 就会发生变化,之前文章地址也会变成404,而且URL层级很深,不利于分享和搜索引擎收录。
Hexo+Gitee搭建个人博客

  • 安装插件:npm install hexo-abbrlink --save

    F:blog>npm install hexo-abbrlink --save  added 5 packages in 2s 
  • 修改配置

    修改博客根目录配置文件 _config.yml 的 permalink:

    permalink: p/:abbrlink.html   abbrlink:     alg: crc32   #算法: crc16(default) and crc32     rep: hex     #进制: dec(default) and hex 
赞(0) 打赏
未经允许不得转载:张拓的天空 » Hexo+Gitee搭建个人博客
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏