Gitee + Hexo 搭建个人博客

安装 Hexo

在安装 Hexo 之前,你需要安装以下两个工具:

安装 Git

  • Windows:下载并安装 git.

  • Mac:使用 Homebrew, MacPortsbrew install git ; 或下载 安装程序 安装。

  • Linux (Ubuntu, Debian): sudo apt-get install git-core

  • Linux (Fedora, Red Hat, CentOS): sudo yum install git-core

  • Linux (Arch 系列): sudo pacman -S git

    提醒

    由于墙的原因,从上面的链接下载 git for windows 最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

    提醒

    如果你是 CentOS 服务器上的,可以直接使用 HexoOneClickInstallation 这个脚本快速安装 Hexo。

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

或者您也可以下载 安装程序 来安装。(最好下载带LTS版本的)

提醒

在中国大陆由于某些众所周知的网络原因,推荐使用淘宝 NPM 镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用 cnpm install 来代替所有 npm install 指令。

开始安装 Hexo

安装好后,即可使用 npm 完成 Hexo 的安装。

$ npm install -g hexo-cli

如果安装太慢,则可以使用上面的淘宝镜像

$ cnpm install -g hexo-cli

启动和美化 Hexo

首先建立一个文件夹。进入文件夹,右键选择Git Bash Here(注意:要安装Git才会有此命令)然后输入下面的命令往这个文件夹里安装 Hexo。

$ hexo init

运行 Hexo

$ hexo g 
$ hexo s

在浏览器中输入 http://localhost:4000/ 即可看到Hexo在本地部署完成

Hexo 命令详解

该部分如已了解,可自行跳过

下面介绍一些 Hexo 的基本命令。

hexo init [folder]

这个命令是 Hexo 初始化命令。 [folder] 表示你要初始化的文件夹。如果你要初始化本地,直接 hexo init

hexo new [layout] <title>

这个命令是新建文章或页面用的命令。其中 [layout] 表示他的模板(即页面或者文章), <title> 表示标题。

用法:

  1. hexo new post 001 ,表示新建了一个标题为 001 的文章。
  2. hexo new page 001 ,表示新建了一个标题为 001 的页面。

如果你不想在终端中新建文章或页面,可以直接在 博客根目录/source/_post/ 目录下创建 Markdown 文件写文章。或者在 博客根目录/source/ 目录下创建一个文件夹,然后在新文件夹里创建 index.md页面即可。

提醒

当你新建页面后,页面的链接就是你页面所在的文件夹的名字。

例如:我在 博客根目录/source/ 下新建了一个名为 test 的文件夹,然后在 test 文件夹下写 Markdown 文件,那么这个页面的链接就是 网址/test

$ hexo server (可缩写为 hexo s)

当你要在本地查看网站的时候,就可以用这个命令。

默认在 http://localhost:8080/ 这里,可能会不同,注意提示信息即可。

提醒

如果你想要换端口号(上面的 8080 就是端口号),可以在终端里输入 hexo s -p 端口号

$ hexo generate (可缩写为 hexo g)

这个命令是生成网站静态文件的时候用的,生成后网页将会放在根目录下面的 public 文件夹里。

$ hexo deploy (可缩写为 hexo d)

这个命令用来部署网站,使用此命令将会把生成好的页面(即 public 文件夹里的内容)部署到指定的地方上。

$ hexo clean (可缩写为 hexo cl)

这个命令用来清空 public 文件夹。

$ hexo version

这个命令用来输出你所使用的 Hexo 目前的版本号。

配置 Hexo

注:如果使用下面黑石大佬魔改的``Volantis`主题,这部分的内容了解即可,不用配置

警告

此部分内容可能过期,请见 Hexo 官方文档

没错,就是在 Hexo 根目录 _config.yml 这个文件里配置!

警告

在 YAML 语法中,冒号后面必须要有一个空格才能继续写下去。

网站

# Site
title:
subtitle:
description:
keywords:
author:
language:
timezone:
参数描述
title网站标题
subtitle网站副标题
description网站描述
keywords网站关键词
author作者名字
language网站使用的语言
timezone网站时区:详见时区列表
URL
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url:
root:
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailiing_index: true
参数描述
url网址
root网站根目录
permalink文章的永久链接格式
permalink_defaults永久链接中各部分的默认值
pretty_urls改写 permalink 的值来美化 URL
pretty_urls.trailing_index是否在永久链接中保留尾部的 index.htmlfalse 时去除

提醒

如果你的网站在子目录中,如: https://yoursite.com/blog ,就把你的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

例如:

# 比如,一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/
目录
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md
参数描述
source_dir资源文件夹
public_dir公共文件夹
tag_dir标签文件夹
archive_dir归档文件夹
category_dir分类文件夹
code_dirInclude code 文件夹
i18n_dir国际化文件夹
skip_render跳过文件的渲染。匹配到的文件将直接复制到 public 目录中。您可使用 glob 表达式来匹配路径。

提醒

一般情况下,这部分是不需要修改的。

例如:

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染
文章
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
  enable: true
  field: site
  exclude: []
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
参数描述
new_post_name新文章的文件名称
default_layout预设布局
auto_spacing在中文和英文之间加入空格
titlecase把标题转换为 title case
external_link在新标签中打开链接
external_link.enable在新标签中打开链接
external_link.field适用于整个网站或仅文章
external_link.exclude排除主机名。在适用时指定子域,包括 www
filename_case把文件名称转换为 (1) 小写或 (2) 大写
render_drafts显示草稿
post_asset_folder启动 Asset 文件夹
relative_link把链接改为与根目录的相对位址
future显示未来的文章
highlight代码块的设置
highlight.enable开启语法高亮
highlight.auto_detect如果未指定语言,则启用自动检测
highlight.line_number显示行数
highlight.tab_replace用 n 个空格替换 tabs;如果值为空,则不会替换 tabs
分类 & 标签
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
参数描述
default_category默认分类
category_map分类别名
tag_map标签别名
日期 / 时间格式
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
use_date_for_updated: true
参数描述
date_format日期格式
time_format时间格式
use_date_for_updated如果前面没有提供更新日期,则使用 post.updated 中的发布日期。通常与 Git 工作流一起使用。

提醒

Hexo 使用 Moment.js 来解析和显示时间。

分页
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
参数描述
per_page每页显示的文章量 (0 = 关闭分页功能)
pagination_dir分页目录
扩展
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme:
theme_config:
deploy:
meta_generator:
参数描述
theme当前主题名称。值为 false 时禁用主题
theme_config主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置。
deploy部署的设置
meta_generatorMeta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签。

使用黑石大佬魔改的Volantis主题

先给出原文链接:https://www.heson10.com/volantis/posts/3882.html

自己使用的配置**(建议非本人不要使用我的配置,去上面的链接原文处使用大佬的配置一步一步的来)**

进入博客根目录,右键Git Bash Here 打开Git

下载主题
git clone https://gitee.com/colzry/volantis-heson.git themes/volantis-heson
更换主题

打开根目录_config.yml文件

theme: volantis-heson
安装依赖

改根目录下的package.json文件

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "5.1.1"
  },
  "dependencies": {
    "hexo": "^5.1.1",
    "hexo-abbrlink": "^2.2.1",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-json-content": "^4.2.3",
    "hexo-generator-tag": "^1.0.0",
    "hexo-related-popular-posts": "^5.0.1",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-wordcount": "^6.0.1"
  }
}

然后输入下面命令,本地预览

npm install && hexo cl && hexo g && hexo s
修改主题配置

在主题目录的config.yml中找到符号

这些都是必须修改的项目,在修改的内容在里面已经说明

FAQ

Q1:首页文章的头图怎么添加?

A1:在md文章头部的frontmater里面添加headimg: 链接地址

Q2:怎么添加分类标签说说页面?

A2:输入命令:

hexo new page categories
hexo new page tags
hexo new page bb
hexo new page links          
hexo new page guestbook

然后分别在生成的两个index.md里的frontmater里面添加layout: categorylayout: taglayout: bblayout: friends

命令对应模板
hexo new page categorieslayout: category
hexo new page tagslayout: tag
hexo new page bblayout: bb
hexo new page linkslayout: friends
hexo new page guestbook

Q3:怎么调用友情链接?

A3:我用的是gitee动态调用,这样的好处是:可以直接申请审核,不用动代码加友情链接。

我得调用代码:

{% issues sites | api=https://gitee.com/api/v5/repos/heson525_admin/links/issues?sort=created&direction=asc&labels=active&state=open&page=1&per_page=100 | group=group:技术大佬,朋友们 %}

其中api要换成自己的gitee链接,我这个链接中heson525_admin是我的用户名,links是仓库名后面的group是分组,active是判断是否显示的标签。

Q4:如何在分类和标签页面添加分类和标签?

A4:在文章xxx.md里的frontmater里面添加 tags: 标签名 categories: 分类名 即可。例如:

# 一个标签和分类
title: 初次安装Git的配置
author: Colzry
tags: Git
categories: Git
headimg: 链接地址

# 多个标签和分类
title: 树莓派4B无显示器开机
author: Colzry
tags: 
- Linux
- 树莓派
categories:
- 树莓派
headimg: 链接地址

部署到 Gitee

打开Gitee

将ssh公钥添加到Gitee(这个不会的百度)

新建一个仓库

image-20210411152401582

仓库名和路径必须和用户名一致

image-20210411152817969

点击服务的Gitee Pages

image-20210411153229856

勾选强制使用HTTPS然后启动

image-20210411153420610

安装部署插件

$ npm install hexo-deployer-git --save
$ npm install hexo-server --save

配置 Git

如果你只是安装好了 Git 但没有配置过你的 Git ,那么现在需要做的第一件事情就是设置你的 Git 用户名和邮箱。 在 Git Bash 中执行以下两条命令配置你的用户名和邮箱,这里建议用户名和邮箱与你的 GitHub 用户名和邮箱保持一致。

$ git config --global user.name "Your_user_name"
$ git config --global user.email Your_email@example.com

提醒

每次 Git 提交时都会附带这两条信息,用于记录是谁提交的更新,并且会随更新内容一起被记录到历史记录中。简单说,是用来标记的你的身份的~

配置站点 _config.yml 文件

deploy:
  type: git # 类型填git
  repo: <repository url> # 你的Gitee仓库地址(https和ssh都可以)
  branch: master # 分支名称。
  message: # 提交信息可以自定义,不填的则默认为提交时间

发布到 Gitee

在本地的 Hexo 站点根目录下,执行如下命令即可部署到 GitHub Pages 上。

$ hexo clean && hexo d -g

提醒

如果是第一次使用,会弹出一个登录框,需要登录你的 GitHub 账号。

之后来到Gitee Pages页面,点击更新按钮,重新部署一下即可


推荐:想了解更多Hexo的教程和内容请打开Easy Hexo

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值