玩命加载中 . . .

手把手教你使用Hexo-GiteePages搭建个人博客


写在前面

最初开始想要搭建博客有两个原因:

  1. 想要把自己学习的东西自己消化然后输出,有一个比较系统的管理。
  2. 闲得慌,就是想折腾。

可能有人会问为什么有那么多博客平台不用,非要自己搭建一个?
其实就是觉得自己搞一个比较有成就感,而且自己可控,还有就是完全免费的可以搞一个属于自己网站,何乐而不为呢🤘

至于为啥选中 Hexo,因为一 Google 搭建免费个人博客最多的就是使用 Hexo😂,所以选择了 Hexo。
为啥选择 GiteePages 而不是 GitHubPages,自然是因为 Gitee 是国内的代码托管平台,至少是不会被墙掉的吧😂,而且访问速度也是个人感觉要快一点。

Hexo 和 GiteePages 是什么

Hexo

简单一点来说,Hexo 就是一个快速、简洁且高效的博客框架。

Hexo 官网

GiteePages

GiteePages 是码云的一个和 GitHub Pages 类似的免费的静态页面托管服务。目前 GiteePages 支持 Jekyll、Hugo、Hexo 编译静态资源。

GiteePages 文档

开始搞事

搞事情步骤:

  1. 安装 nodejs
  2. 安装 Git
  3. 安装 Hexo
  4. 初始化 Hexo 博客(个人网站)文件夹
  5. 注册 Gitee 账号
  6. 创建 Gitee 仓库
  7. 提交文件到 Gitee 仓库前的准备工作
  8. 推送资源文件到 Gitee 仓库
  9. 开启 GiteePages 服务

1. 安装 nodejs

因为 Hexo 是基于 nodejs 的,所以要使用 Hexo,那么第一步肯定是安装 nodejs。安装分为以下几个步骤:

  1. 下载 nodejs
  2. 安装 nodejs,mac 和 win 下都是安装程序,直接安装就行了,linux 下可以通过命令直接从仓库安装也可下载二进制包安装(ps:linux 不同发行版本安装命令不一样,这里不再赘述)。安装完成之后可以在终端输入 node -vnpm -v 查看是否安装成功,这两条命令如果都输出了版本号,那么就表示安装成功了。
  3. 安装完成之后因为 nodejs 的仓库是是国外仓库的原因,所以在下载模块的时候会巨慢(当然,如果你是有过墙梯的人,就当我没说),那么就需要添加国内的仓库。
    在终端执行:
npm config set registry https://registry.npm.taobao.org

2. 安装 Git

要将本地的文件推送到远程的 Gitee 仓库就需要安装 Git。安装分为以下几个步骤:

  1. 下载 Git
  2. 安装,同 nodejs 的安装一样,mac 和 win 下都是安装程序,直接安装就行了,linux 下可以通过命令直接从仓库安装(ps:linux 不同发行版本安装命令不一样,这里不再赘述)。
    安装完成之后在终端输入 git --version,如果输出了版本号,那么就表示安装成功了。

3. 安装 Hexo

nodejs 准备就绪了,那么现在就可以有请第一位主角 Hexo 出场了。

执行命令:

npm install hexo-cli -g

执行命令如果报错:

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/hexo-cli
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules/hexo-cli
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/hexo-cli'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/hexo-cli'] {
npm ERR!   stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules/hexo-cli'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/hexo-cli'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

那是因为安装过程中需要在系统文件夹写入文件,但是执行命令的账号没有系统文件夹的写入权限导致的。

这个时候就需要使用 root 权限来执行命令:

sudo npm install hexo-cli -g

安装命令执行完成之后,在终端执行 hexo -v 如果输出了 Hexo 的相关信息则表示 Hexo 已经安装成功。

恭喜你,离成功进了一步了👏

4. 初始化 Hexo 博客(个人网站)文件夹

Hexo 已经安装完成,现在我们要做的就是使用 Hexo 来初始化一个我们存放博客或者说是个人网站资源的文件夹。

在你的电脑硬盘中找一个你觉得爽的位置,执行命令:

hexo init blog // blog 为创建的目录,你可以自己定义

不出意外,现在你的文件夹已经创建好了。

使用终端进入到创建好的文件夹。

执行命令用于更新 nodejs 的模块:

npm install

好了,现在你可以在这个创建好的文件夹中搞事情了🤘。

尝试下在该目录下执行命令:

hexo server

你会看到如下输出:

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

说明 Hexo 的服务已经启动成功了,你可以在你的浏览器访问就会出现你的博客(个人网站)主页了

就像这样的

hexo

虽然已经看到了页面,但是所有的配置都是默认的,我们还需要做一些修改。在该文件夹下面,找到_config.yml 文件,这个文件是 Hexo 的配置文件,大体如下:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 你的博客(个人网站)名称
subtitle: 你的博客(个人网站)子名称
description: '你的博客(个人网站)的描述'
keywords: 你的博客(个人网站)的关键字
author: 你的博客(个人网站)的作者
language: 你的博客(个人网站)语言 en:英文 zh-CN:简体中文
timezone: '时区(可以不用配置)'

# 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:
  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

# 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:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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 post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ''

这里可以把你的博客(个人网站)的信息配置一下,其余的配置可根据自己的需求配置。

看到了首页是不是有一点小激动,到了这里,你已经成功一半了👍

趁热打铁,接着搞事情。

5. 注册 Gitee 账号

现在 nodejs 有了,Git 也是安装好了,我们既然是使用 GiteePages 来搭建博客,那么当然是需要一个 Gitee 的账号,注册账号不用多说了吧。点击注册 Gitee

6. 创建 Gitee 仓库

好了,经过上面的步骤,已经可以在本地运行你自己的博客(个人网站)了。

如果想要别人也能访问你的博客(个人网站),那么就需要我们的第二位主角 GiteePages,能够使用 GiteePages 的前提就是需要有一个 Gitee 仓库。

现在登录到你之前注册的 Gitee 主页,顶栏上有个 + 图标

gitee

鼠标移上去,点击新建仓库进入到创建仓库页面

cangku

如果你想直接通过域名就能访问你的博客(个人网站)的话,创建仓库的时候你的仓库名就需要和你注册 Gitee 的时候的用户名一样。

例如:我的 Gitee 用户名为 Edgar0,我创建的仓库名是 Edgar0,那我访问的时候直接使用 Edgar0.gitee.io 就可以直接访问了。但是,如果我创建的仓库名和用户名不一样,比如我创建仓库的时候,仓库名为 blog,那我访问的时候,就必须要域名 + 仓库名才能访问.

是否开源的选项,如果你的东西不想被别人看见的话,就选择私有的。

其他的随便选择就好。

这样,存放我们博客(个人网站)资源的仓库就创建好了。

7. 提交文件到 Gitee 仓库前的准备工作

将本地文件推送到 Gitee 仓库之前,我们需要做一些简单的配置。

在终端输入命令配置 Git 提交时的用户名和邮箱:

git config --global user.name "username" //全局配置提交是使用的提交人名
git config --global user.email "xxx@mail.com" //全局配置提交人的电子邮箱

如果想每次提交的时候不输入用户名和密码就需要在本地生成 ssh 秘钥。

在终端输入:

ssh-keygen -t rsa -C "公钥描述"

生成的秘钥会存放在 ~/.ssh/ 目录下。

接下来在终端输入:

cat ~/.ssh/id_rsa.pub

就可以看到生成的公钥内容了,将公钥的内容复制下来放到 Gitee 上。

进入到你的 Gitee 主页,点击设置

bksz

进入到 Gitee 设置页面,找到安全设置 -SSH公钥

aqsz

进入到添加公钥页面

ssh

将刚才你复制的公钥内容粘贴到公钥输入框,点击确定保存公钥。

做完以上操作之后,可以测试一下公钥是否配置成功。

在终端输入:

ssh -T git@gitee.com

执行命令如果输出了:

Hi 你的Gitee账号! You've successfully authenticated, but GITEE.COM does not provide shell access.

此时证明你的公钥已经配置成功了。

接下来要做的就是将本地的文件推送到 Gitee 仓库了。

8. 推送资源文件到 Gitee 仓库

本地博客(个人网站)目录已经生成,Gitee 仓库已经创建,现在我们需要将本地的文件推送到 Gitee 仓库了。

因为 GiteePages 是支持 Hexo 资源编译的,所以需要推送到 Gitee 仓库的文件就有两种选择。

  1. 只推送 Hexo 生成的静态文件到 Gitee 仓库

这种方式是直接将 Hexo 生成的所有静态文件推送到 Gitee 仓库,这样就相当于是 GiteePages 托管的就是你的博客(个人网站的)所有生成好的静态文件,就不需要 GiteePages 再去编译生成一次静态文件。这样每次更新 GiteePages 的时候时间会相对短一些。这种方式还有个好处就是操作简单一点,可直接通过 Hexo 命令来推送文件到 Gitee 仓库。

使用终端,进入到博客(个人网站)文件夹下面,执行命令安装一个插件:

npm i hexo-deployer-git

装好插件之后,在该目录下找到_config.yml 文件,打开文件配置你的仓库信息:

#在文件中找到这个deploy这个节点,修改或添加配置
deploy:
  type: git
  repo: 你的仓库地址
  branch: 你要推送到仓库的分支(默认为master)

在该目录下执行:

hexo g

这个命令会根据你的 Markdown 文件生成对应的静态文件,生成好了之后,可本地启动 Hexo 服务看下效果,输入命令:

hexo s //和hexo server命令一样

感觉效果满意了,就可以提交到 Gitee 仓库了,执行命令:

hexo d

至此,生成的静态文件就已经推送到 Gitee 仓库去了。

  1. 将整个之前初始化的文件夹推送到 Gitee 仓库

这种方式是将你初始化的博客(个人网站)整个文件夹下面的所有文件推送到 Gitee 仓库,GiteePages 在更新的时候会自动的去编译一次你的目录,然后生成所有的的静态文件,这样的话,每次更新 GiteePages 的时候肯定时间就相对会久一点。

在终端进入到之前初始化的博客(个人网站)文件夹中,执行命令:

git init //将该文件夹中的文件纳入到Git的版本控制中

git add . //将所有的文件添加到Git暂存区

git commit -m "此次提交的说明" //将文件提交到本地

git remote add origin 你的远程仓库地址 //告诉Git你的Gitee仓库在哪里

git push -u origin master //将你本地的文件提交到Gitee仓库的master分支

至此,你的博客(个人网站)的所有文件已经提交到了 Gitee 仓库去了。

ps:Gitee 仓库地址需要进入你创建的仓库首页才能看到,既然配置了公钥,那么仓库地址肯定是使用 ssh 协议最好。

现在是万事具备,只欠开启 GiteePages 服务了。

9. 开启 GiteePages 服务

终于走到了最后一步。

现在进入到你的 Gitee 仓库页面,找到服务,点击 Gitee Pages 开启 GiteePages 服务

pgsz

进入到页面之后,可选择 GiteePages 服务需要托管的分支,推荐勾选上强制使用HTTPS,选择完毕之后点击启动便可开启 GiteePages 服务。

gpfw

启动完成之后会展示你的 GiteePages 网址,这个网址便是你的博客(个人网站)的网址了,记住这个网址。

以后如果你的博客(个人网站)的内容有改动,只需在 GiteePages 服务页面点击更新即可。

至此,你的博客(个人网站)便已经全部搭建完成。

Hexo 写作

你的博客(个人网站)搭建完成之后便可使用 Hexo 开始开始丰富博客(个人网站)的内容了。

如何使用 Hexo 写作,请看 Hexo 文档

写在后面

本文只是介绍如何使用 Hexo 和 GiteePages 来搭建一个免费的博客(个人网站),至于 Hexo 更多的使用这里不做介绍,大家可以去 Hexo 官网查看具体的使用和去网上搜索更多 Hexo 适用的骚操作。

如果有错的地方或者意见和建议,欢迎大家在下方评论留言指出🙏


文章作者: Edgar
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Edgar !
评论
  目录