暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / 基于Hexo+GiteePages搭建的个人Blog教程

基于Hexo+GiteePages搭建的个人Blog教程

青年之学 2021-04-28
619

前言

一、为什么想要搭建个人博客网站?

首先是想要把自己学习积累的东西可以高效输出，有一个比较系统的管理。然后拥有一个自己的个人博客对于一个计算机专业生或是计算机爱好者都是一件挺好的事情，甚至在面试就业中也会为自己加分。最后就是闲得慌，就是想折腾。

二、那么多博客平台不用，非要自己搭建一个？

首先其实就是觉得自己搞一个比较有成就感，而且自己可控，还有就是完全免费的可以搞一个属于自己网站，何乐而不为呢？然后就是其实在自己动手搭建的过程中，也是一个学习的过程。

三、为什么选中 Hexo？

首先 Google 搭建免费个人博客最多的就是使用 Hexo， 然后Hexo框架比较成熟，拥有较多主题等资源，最后就是因为其用户多，较成熟的框架，在使用过程中遇到问题方便查找解决办法。

四、为什么选择 GiteePages 而不是 GitHubPages？

因为 Gitee 是国内的代码托管平台，至少是不会被墙掉的吧，而且访问速度也是个人感觉要快一点。

五、这种方式搭建的优点？

  • 无需购买服务器
  • 无需购买域名
  • 方便快捷

Hexo和GiteePages是什么

Hexo

简单一点来说，Hexo就是一个快速、简洁且高效的博客框架。官方网站：https://hexo.io/
Tip:由于微信公众平台不允许进行非微信文章外链，需要进行复制打开，以下网址同理.

GiteePages

GiteePages是码云的一个和GitHub Pages类似的免费的静态页面托管服务。目前GiteePages支持 Jekyll、Hugo、Hexo编译静态资源。GiteePages文档网站：https://gitee.com/help/articles/4136

准备及过程步骤

1.安装Node.js
2.安装Git
3.安装Hexo
4.初始化Hexo博客（个人网站）文件夹
5.注册Gitee账号
6.创建Gitee仓库
7.提交文件到Gitee仓库前的准备工作
8.推送资源文件到Gitee仓库
9.开启GiteePages服务
10.美化主题及文章发布

0.几点提示

1.同时按下Win键和R键（或者点击“开始菜单”->点击“运行”）,打开运行窗口,输入“cmd”，然后输入以下各命令.

2.对于完全不会使用的新手，输入完一个命令记得按一下回车键.

3.以下安装是基于Windows10 64位系统.

4.端正心态，遇到问题不要慌，大不了重新开始就行.

1.安装Node.js

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

  1. 下载Node.js
    下载地址：https://nodejs.org/

  2. 安装Node.js

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

2. 安装Git

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

1.下载Git

下载地址：https://git-scm.com/

2.安装

同Node.js的安装一样，Mac OS和Windows下都是安装程序，直接安装就行了，Linux下可以通过命令直接从仓库安装（PS：Linux不同发行版本安装命令不一样，这里不再赘述）。安装完成之后在终端输入git --version，如果输出了版本号，那么就表示安装成功了。

3. 安装Hexo

Node.js准备就绪后，那么现在就可以有请第一位主角Hexo出场了。执行命令：
npm install hexo-cli -g

执行命令如果报错：

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

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

这里可以把你的博客（个人网站）的信息配置一下，其余的配置可根据自己的需求配置。看到了首页是不是有一点小激动，到了这里，你已经成功一半了!

5. 注册Gitee账号

现在Node.js有了，Git也是安装好了，我们既然是使用GiteePages来搭建博客，那么当然是需要一个Gitee的账号，注册账号不用多说了吧。
点击注册Gitee:https://gitee.com

6. 创建Gitee仓库

经过上面的步骤，已经可以在本地运行你自己的博客（个人网站）了。
如果想要别人也能访问你的博客（个人网站），那么就需要我们的第二位主角GiteePages，能够使用GiteePages的前提就是需要有一个Gitee仓库。
现在登录到你之前注册的Gitee主页，顶栏上有个+图标
鼠标移上去，点击新建仓库进入到创建仓库页面,进行新建一个公开仓库。
如果你想直接通过域名就能访问你的博客（个人网站）的话，创建仓库的时候你的仓库名就需要和你注册Gitee的时候的用户名一样。
例如：我的Gitee用户名为yjs0612，我创建的仓库名是yjs0612，那我访问的时候直接使用yjs0612.gitee.io就可以直接访问了。但是，如果我创建的仓库名和用户名不一样，比如我创建仓库的时候，仓库名为blog，那我访问的时候，就必须要域名+仓库名才能访问，如yjs0612blog.gitee.io。

是否开源的选项，如果你的东西不想被别人看见的话，就选择私有的。
其他的随便选择就好。
这样，存放我们博客（个人网站）资源的仓库就创建好了。

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

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

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

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

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

在终端输入：

ssh-keygen -t rsa -C “your_email@example.com”
按提示分别输入Key文件保存路径和密码(可以为空)，完成会有如下提示即表示创建成功
添加SSH Key到Github账户复制当前用户根目录.ssh文件夹下的id_rsa.pub文件内容,添加到github 设置中的SSH keys选项下,如下图
将刚才你复制的公钥内容粘贴到公钥输入框，点击确定保存公钥。
做完以上操作之后，可以测试一下公钥是否配置成功。在终端输入：

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

2.将整个之前初始化的文件夹推送到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服务
进入到页面之后，可选择GiteePages服务需要托管的分支，推荐勾选上强制使用HTTPS，选择完毕之后点击启动便可开启GiteePages服务。
启动完成之后会展示你的GiteePages网址，这个网址便是你的博客（个人网站）的网址了，记住这个网址。
以后如果你的博客（个人网站）的内容有改动，只需在GiteePages服务页面点击更新即可。
至此，你的博客（个人网站）便已经全部搭建完成。

10.美化主题及文章发布

博客的默认主题一般都是很丑的，所以难免我们要更换主题
Hexo博客的主题是放在根目录的/themes目录下的，你可以去网上下载自己喜欢的主题，然后打开根目录下的_config.yml文件，如下图修改theme这一项为你安装的主题名称即可 本站主题：Butterfly
点击访问：https://butterfly.js.org/关于写文章，就不在这里赘述了详情移步Hexo文档：https://hexo.io/zh-cn/docs/

结语

本文只是介绍如何使用Hexo和GiteePages来搭建一个免费的博客（个人网站），至于Hexo更多的使用这里不做介绍，大家可以去Hexo官网查看具体的使用和去网上搜索更多Hexo适用的操作。如果有错的地方或者意见和建议，欢迎大家在下方评论留言指出。欢迎大家访问我的博客：https://yjs0612.gitee.io/点击下方阅读原文进入博客
希望大家关注我的微信公众平台：青年之学

本文参考自：奔跑嘞大肚皮
链接：https://www.jianshu.com/p/26a726baf70

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  掌握更多知识，请扫码关注我~这里有大学的各种高校服务
点击下方“在看”，给我鼓励
数据库
文章转载自青年之学，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论