【效率为王】超详细 Hexo + Github Pages 博客搭建教程

本文涉及的产品
.cn 域名,1个 12个月
简介: 【效率为王】超详细 Hexo + Github Pages 博客搭建教程

前言

现在市面上已经有许多博客了,比如 CSDN、掘金、博客园、简书等等。我们可以直接在上面发表内容,而且交互比较人性化,而且也能被搜索引擎检索到。但是总归是别人的平台,经常会受限,因此我们就希望能有自己的博客。之前也尝试过搭建过不同的博客类型,折腾了不少工作,最终决定定型,采用 Hexo + Github Pages 的方式。今天就带大家一起来搭建自己的博客。由于是采用 Hexo + Github Pages 的方式,所以都是免费的,只是需要有一定的动手能力!


Hexo 简介

Hexo 是一个快速、简洁且高效的静态博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。我们只需要通过 Markdown 语法写好自己的博客内容,然后通过简单的命令就能够将生成的网页上传到 Github,然后大家都可以来访问你的网页了。既方便了自己,也给了自己一个展示自己成果的平台,是不是一举两得。


搭建步骤

搭建之前,需要做一些准备工作,首先需要确保你的电脑上已经上安装好了 Git 和 Node.Js,然后才能开始安装 Hexo,那么首先我们先来看看如何准备这这些环境。


Git

安装

Window:下载并安装

macOS:下载并安装

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

Linux(Fedora、RedHat、CentOS):sudo yum install git-core

设置

安装成功后,将 git 与 GitHub 账号绑定,右键打开 Git Bash,然后设置配置信息:


image.png# 配置用户名和邮箱

git config --global user.name "github 用户名"

git config --global user.email "github 注册邮箱"


比如我的配置就是:


git config --global user.name "cunyu1943"

git config --global user.email "747731461@qq.com"


接着生成 ssh 密钥文件,输入如下命令后直接三次回车即可,一般不需要设置密码;


# 生成 ssh 密钥

ssh-keygen -t rsa -C "github 注册邮箱"

我生成秘钥的命令:


ssh-keygen -t rsa -C "747731461@qq.com"


image.png一般执行上述命令之后,会生成 id_rsaid_rsa.pub 两个文件,前者是我们私有的,而后者则是对外开放的。接着找到生成的 .ssh 的文件夹中的 id_rsa.pub 密钥,将内容复制;

image.png然后打开 GitHub-Settings-Keys 页面,创建一个新的 SSH key,填写 TitleKeyTitle 可以随意,而 Key 的内容则是我们刚才复制的 id_rsa.pub 中的内容,最后点击 Add SSH key 即可;

image.pngNode.Js 安装

安装

去官网下载最新的稳定版 Node.JS ,一般推荐 64 位(大家应该现在用的电脑基本都是 64 位的吧),安装的话很简单,基本就是下一步下一步点击就好了。如果还是不知道如何安装,可以参考我的另一篇博客:Windows 下 Node.js 的安装(多图版)


验证

安装完成后,要查看我们是否安装成功,可以打开命令提示符(Win + R),输入 cmd 打开控制台,输入如下命令,如果出现对应版本号,说明安装成功了;


node -v

npm -vimage.png设置

由于下载包是从国外服务器,所以速度较慢,因此我们推荐用阿里的国内镜像进行设置;


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

1

Hexo 安装

在你的硬盘上找个地儿,用来存放你的博客文件,比如我的就在 D:personalFiles/github/blog,这个文件夹你可以根据自己的喜好来设置。然后从命令台进入当前文件夹,接下来就是安装过程了;


首先安装 Hexo

npm i hexo-cli -g


image.png

  1. 新建一个文件夹用于存放你的博客,比如我的是 blog,然后进入该文件夹,并用如下命令进行初始化并安装必备组件;
hexo init .
npm install

image.png

  1. 初始化后,目录结构如下;
.
├── _config.yml # 网站配置信息
├── package.json # 应用程序信息
├── scaffolds # 模板文件夹
├── source # 存放用户资源
|   ├── _drafts
|   └── _posts
└── themes # 主题文件夹
  1. 然后输入如下命令,然后在浏览器中打开 http://localhost:4000
# 新建博客
hexo new "博客名"
# 生成静态网页
hexo g
# 打开本地服务器
hexo s

然后就可以看到如下的界面,不过我的是经过修改过的,所以和你的会不一样。

image.pngGithub 个人仓库

完成上面的步骤之后,我们就能在本地进行预览了,不过我们如果想要发布到网上供别人看的话,那就得利用 Github Pages 的功能了,下边就来介绍如何结合 Hexo + Github Pages ,将我们的博客推送到网上去,方便大家在任何地方访问!


首先你得有个 GitHub 账号,如果没有的,请出门 右转 先去注册个账号;


有了账号之后,新建一个仓库,而且得确保你的仓库是 public,你要搞个 private,谁能访问的了???同时,仓库名一定要是:


用户名.github.io


用户名.github.io


用户名.github.io


这个用户名建议不要太复杂,但是又要能体现你个人特点,因为后续让别人访问你的博客时,就要通过 https://用户名.github.io 这个域名来访问。比如我的用户名是 cunyu1943,所以我的仓库就是 cunyu1943.github.io:



image.png

部署到 Github

完成上面的步骤后,你应该能在本地进行预览了,接下来就是推送网站到 Github Pages 了,然后我们就能被其他人访问了。

只需要在我们刚才的博客根目录中的站点配置文件 _config.yml ,设置为你的个人仓库名即可:image.png完成上述步骤之后,主要使用如下命令,就能将我们本地的内容推送到远程 GitHub 仓库了,然后在浏览器中访问:

https://用户名.github.io

比如我的博客 村雨遥的博客

hexo clean
hexo g
hexo d
• 1
• 2
• 3

image.pngGitee 个人仓库

上面说完部署到 Github,接下来就说说怎么部署到 Gitee,老规矩,首先你得需要一个 Gitee 账号,如果没有的,出门 右转 先去注册个账号。


然后新建一个仓库,同样有几点需要注意的:


保证你的仓库是 public;

仓库名是 你的用户名,这一点和 Github 略有不同,不需要是 用户名.gitee.io;

比如我的用户名是 cunyu1943,所以我的仓库名就是 cunyu1943。


image.png部署到 Gitee

完成上面的步骤后,你应该能在本地进行预览了,接下来就是推送网站到 Gitee Pages 了,然后我们就能被其他人访问了。这里需要注意的是,Gitee Pages 不像 Github Pages 会自动更新,它需要你每次推送后,去更新一下,如果想要自动更新,就需要开通 Gitee 的会员。


然后需要在我们刚才的博客根目录中的站点配置文件 _config.yml ,设置为你的个人仓库名即可:


\image.pngimage.png完成上述步骤之后,主要使用如下命令,就能将我们本地的内容推送到远程 Gitee 仓库了,去手动更新 Gitee Pages 后,然后在浏览器中访问:

https://用户名.gitee.ioimage.png如何写新博客并推送到远程

通过上面的步骤后,你的博客应该就已经搭建成功,而且能通过 https://用户名.github.io 的方式进行访问了。接下来如果我们要发一篇新的博客内容,又应该怎么办呢?接下来就详细讲一下如何操作。


首先进入博客所在文件夹,然后右键进入控制台,用如下命令进行创建新的文章;

hexo n "博客标题名"

1



image.pngimage.pngimage.pngimage.png如何绑定自定义域名

通过 用户名.github.io 的方式来访问总归是有些不方便,如果我们需要自己的个性域名,又应该如何设置呢?那么在此之前,你需要有一个已经备案好的域名,如果没有的话,请到阿里云、腾讯云等场商购买自己的域名,然后通过该平台备案,然后添加两条解析记录,以我的腾讯云为例:


image.png备好案并设置解析之后,在 Github 的博客项目中,依次点击 Settings->Pages,然后在 Custom domain 添加你的域名即可,最后 Save 即可,此时你的博客根目录下应该会多一个 CNAME 的文件,然后你就可以通过自己的域名来访问你的博客了。


当然,有时候可能经过上面的设置后,博客根目录下不会出现名为 CNAME 的文件,如果没有,我们可以通过在本地博客 /source 目录下手动建立一个 CNAME 文件(无后缀),然后把你的域名填进去并保存,最后依次执行如下命令将设置上传到 Github 即可 ~


hexo g

hexo d


image.png

image.png比如我的域名为 cunyu1943.site,通过设置之后,我们就可以通过 https://cunyu1943.site 来访问我的博客了。

image.png美化

经过上面的设置之后,我们只是得到了一个简单地博客,如果你也想让你的博客像我的一样酷(zhuang)炫(bi),就要用到主题了,我采用的主题是 hexo-theme-matery,一个基于材料设计和响应式设计而成的主题,而且关于如何设置它也有十分详细的文档,如果存在不懂得问题,还可以及时提交 issue,作者回复也十分及时。


如果你不想过于折腾,那么你完成上面的步骤之后,也可以直接采用我的博客源代码,然后把里边的个人配置改一下就 ok 了,我的博客源码地址:hexo-theme-matery-personal


大家直接下载下来,然后把 node_modules.zip 进行解压,然后修改其中的部分配置(也就是你的 Github、网名啥的呀个人信息),主要是修改根目录下的 _config.yml 和 _config.hexo-theme-matery.yml,然后就可以直接写博客了。当然,前提是你把环境啥的都搭建好了。


PS:我对于配置文件中的某些关键信息进行了隐藏,比如 gitalk、gitment、Valine、baiduAnalytics 等,这些需要你自己去注册并获取自己的信息,请记得修改,否则可能导致失败。


总结

至此,我们的博客就搭建完成了,是不是很简单,赶紧去试试吧!


对于文中不清楚的地方,欢迎留言,我会在看到的第一时间回复你!



目录
相关文章
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
这篇文章是一份详细的GitHub使用教程,介绍了如何在GitHub上创建仓库、创建分支、编辑和发布更改内容、发起拉取请求以及合并分支的操作步骤。
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
|
11天前
|
SQL 运维 安全
GitHub爆赞的Web安全防护指南,网络安全零基础入门必备教程!
web安全现在占据了企业信息安全的很大一部分比重,每个企业都有对外发布的很多业务系统,如何保障web业务安全也是一项信息安全的重要内容。 然而Web 安全是一个实践性很强的领域,需要通过大量的练习来建立对漏洞的直观认识,并积累解决问题的经验。 Web安全与防护技术是当前安全界关注的热点,今天给小伙伴们分享的这份手册尝试针对各类漏洞的攻防技术进行体系化整理,从漏洞的原理到整体攻防技术演进过程进行详细讲解,从而形成对漏洞和web安全的体系化的认识。
|
15天前
|
SQL 运维 安全
GitHub爆赞的Web安全防护指南,网络安全零基础入门必备教程!
web安全现在占据了企业信息安全的很大一部分比重,每个企业都有对外发布的很多业务系统,如何保障web业务安全也是一项信息安全的重要内容。 然而Web 安全是一个实践性很强的领域,需要通过大量的练习来建立对漏洞的直观认识,并积累解决问题的经验。 Web安全与防护技术是当前安全界关注的热点,今天给小伙伴们分享的这份手册尝试针对各类漏洞的攻防技术进行体系化整理,从漏洞的原理到整体攻防技术演进过程进行详细讲解,从而形成对漏洞和web安全的体系化的认识。
|
26天前
|
网络协议 Unix Linux
网安人必须人手一份的《Linux私房教程》,GitHub星标286K!
Linux是一套免费使用和自由传播的操作系统内核,是一个基于POSIX和Unix的多用户、多任务支持多线程和多CPU的操作系统内核。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统内核。 作为网络安全的初学者,Linux基础知识和常用命令是我们的必备技能,我们不能只会操作Windows相关的工具。一方面很多网站都是基于Linux环境搭建,比如LAMP,其安全性更好;另一方面,很多命令或工具都集成在了Linux相关环境中,比如Kali等。 今天给小伙伴们分享一份Linux私房教程,这份
|
7天前
GitHub——使用GitHub Pages生成在线文档
GitHub——使用GitHub Pages生成在线文档
5 0
|
2月前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
2月前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
2月前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
2月前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
2月前
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
49 0