手把手教你使用Hexo+GiteePages搭建一个免费的个人博

2020-03-08 本文已影响0人奔跑嘞大肚皮

我的博客

写在前面

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

想要把自己学习的东西自己消化然后输出，有一个比较系统的管理。

闲得慌，就是想折腾。

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

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

Hexo和GiteePages是什么

Hexo

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

Hexo官网

GiteePages

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

GiteePages文档

开始搞事

搞事情步骤：

安装nodejs

安装Git

安装Hexo

初始化Hexo博客（个人网站）文件夹

注册Gitee账号

创建Gitee仓库

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

推送资源文件到Gitee仓库

开启GiteePages服务

1. 安装nodejs

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

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

npm config set registry https://registry.npm.taobao.org

2. 安装Git

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

下载Git
安装，同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的服务已经启动成功了，你可以在你的浏览器访问就会出现你的博客（个人网站）主页了

就像这样的

image

虽然已经看到了页面，但是所有的配置都是默认的，我们还需要做一些修改。在该文件夹下面，找到_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主页，顶栏上有个+图标

image

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

image

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

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

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

其他的随便选择就好。

这样，存放我们博客（个人网站）资源的仓库就创建好了。

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主页，点击设置

image

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

image

进入到添加公钥页面

image

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

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

在终端输入：

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仓库的文件就有两种选择。

只推送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仓库去了。

将整个之前初始化的文件夹推送到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协议最好。

image

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

9. 开启GiteePages服务

终于走到了最后一步。

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

image

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

image

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

image

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

至此，你的博客（个人网站）便已经全部搭建完成。

Hexo写作

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

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

写在后面

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

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

手把手教你使用Hexo+GiteePages搭建一个免费的个人博

写在前面

Hexo和GiteePages是什么

Hexo

GiteePages

开始搞事

1. 安装nodejs

2. 安装Git

3. 安装Hexo

4. 初始化Hexo博客（个人网站）文件夹

5. 注册Gitee账号

6. 创建Gitee仓库

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

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

9. 开启GiteePages服务

Hexo写作

写在后面

猜你喜欢

热点阅读