快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → 低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客

低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客

时间:2022-09-16 11:56:06人气:作者:快盘下载我要评论

低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客

使用 Hexo+GitHub 搭建个人免费博客

准备:Github账号+域名(非必备)

优点:轻量快速,易维护,安全省心,迁移方便,免费

缺点:发文不便,拓展性差,首次安装麻烦,国内访问速度慢

推荐:有一定编程基础的童鞋

本文目录

1.环境搭建

1.1. GitHub Pages和Hexo简介

1.2. 环境搭建

2.配置 GitHub

3.创建 GitHub Pages 仓库

4.本地安装 Hexo 博客程序

4.1. 安装 Hexo

4.2. Hexo 初始化和本地预览

5.部署 Hexo 到 GitHub Pages

6.绑定域名(可选)

6.1. 域名解析

6.2. 绑定域名到 Hexo 博客

6.3. 自定义域名并开启 HTTPS

7.开始使用Hexo

7.1. 常用命令

7.2. 更换主题

7.3. 网站设置

7.4. 常用代码

1.环境搭建

1.1 GitHub Pages和Hexo简介

GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务,让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。

Hexo 是一个快速、简洁且高效的静态博客框架,它基于 node.js 运行,可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页,最大的优点在于我们不用费尽心力去关注前端页面。

Hexo + GitHub 文章发布原理(图片来源:知乎crystal)

在本地撰写 Markdown 格式文章后,通过 Hexo 解析文档,渲染生成具有主题样式的 HTML 静态网页,再推送到 GitHub 上完成博文的发布。

网络安全

1.2 环境搭建

我们首先要安装Git,本教程是用的GitBash,而Hexo 基于 Node.js,搭建过程中还需要使用 npm(Node.js 安装后会带),下面是下载地址和相关教程,安装过程不过多赘述,大家看教程就行。

Node.js下载地址:https://nodejs.org/zh-cn
Git下载地址(官网很慢,推荐百度网盘或者淘宝镜像):
官网:https://git-scm.com/downloads
淘宝镜像:https://npm.taobao.org/mirrors/node
Node和Git百度网盘下载地址【也可以关注本公众号发送:Node或者Git关键词得到下载地址】:
链接:https://pan.baidu.com/s/1A5P7y0gzbSbGOYQp36OYsA 提取码:71ia
Git使用教程:https://www.idzd.top/archives/111/#%E5%AE%89%E8%A3%85git

下载 Node.js 和 Git 程序后安装,一路点 “下一步” 按默认配置完成安装。安装完成后,Win+R 输入 cmd 并回车,依次输入 node -v、npm -v 和 git --version 并回车,如下图出现程序版本号即安装成功:

Hexo

2.配置GitHub

桌面空白处右键 -> Git Bash Here,进入Gitbash设置用户名和邮箱:

git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"

Hexo

创建 SSH 密匙:

输入以下代码,然后一路回车。

 ssh-keygen -t rsa -C "GitHub 邮箱"

Hexo

添加密匙:

进入 [C:Users用户名.ssh] 目录(要勾选显示“隐藏的项目”),打开公钥 id_rsa.pub 文件并复制里面的内容(建议用Notepad++++、EditPlus等软件,不建议用记事本打开,可能会导致编码异常)。

Git

登陆 GitHub ,进入 Settings 页面,选择左边栏的 SSH and GPG keys,点击 New SSH key。

Git

Title 随便取个名字,粘贴复制的 id_rsa.pub 内容到 Key 中,点击 Add SSH key 完成添加。

Git

测试GitHub链接:

打开 Git Bash,输入下面代码,出现 “Are you sure……”,输入 yes 回车确认。

ssh -T git@github.com

Hexo

出现 “Hi YourName! You've successfully authenticated…” 即连接成功。

3.创建 Github Pages 仓库

在GitHub 主页右上角加号 -> New repository:

网络安全

Repository name 中输入:用户名.github.io 【这里注意因为我们创建是GitHub的个人主页,所以必须填你的GitHub用户名】

勾选 “Initialize this repository with a README” 选项创建readme文件,Description 介绍信息选填。

Hexo

GitHub page 可以建立多个,但个人账户page只能有一个, 项目page可以有多个。
个人主页必须要和用户的GitHub帐号同名,所以每个用户有且只能有一个repo作为个人主页,且必须是<username>/<username>.github.io的形式;而项目主页的命名则没有这种限制,且数量有任意多个。
不考虑绑定的自定义域名的前提下,个人主页的GitHub二级域名为<username>.github.io;项目主页的GitHub二级域名为<username>.github.io/<projectname>,没有<projectname>.<username>.github.io这种方式
个人主页的展示内容以master分支里的文件为准;而项目主页的展示内容以gh-pages分支内的文件为准
单个GitHub帐号下添加多个GitHub Pages的相关问题:
https://blog.csdn.net/weixin_34402090/article/details/89487829

创建后GitHub默认启用 HTTPS,所以此时我们的博客地址为:

https://用户名.github.io

4.本地安装 Hexo 博客程序

首先我们新建一个文件夹用来存放 Hexo 的程序文件,如 MyHexo。在该目录下,鼠标右键 -> Git Bash Here:

https

4.1 本地安装 Hexo

本地安装Hexo十分简单,使用 npm 一键安装 Hexo 博客程序,在刚才打开的GitBash中输入下面代码【可能等待时间比较长,如果报错就重新执行一遍命令】:

npm install -g hexo-cli

GitHub

4.2 Hexo 初始化和本地预览

接下来我们初始化Hexo并安装依赖:

hexo init      # 初始化
npm install    # 安装依赖

Hexo

然后我们输入下面命令,生成页面后启动本地服务器进行预览:

hexo g   # 生成页面
hexo s   # 启动预览

GitHub

然后我们在浏览器访问 http://localhost:4000,出现下面的 Hexo 默认页面,本地博客安装成功!

网络安全

注意:如果出现页面加载不出来,可能是端口被占用了。Ctrl+C 关闭服务器,运行 hexo server -p 5000 更改端口号后重试。

Hexo 博客文件目录结构如下

【来自婷婷网站:https://www.idzd.top/archives/1430/】:

hexo #hexo 初始化目录
├── node_modules   # Node.js 依赖安装目录
├── public         # 生成的静态文件存放目录
├── scaffolds      # 模板文件目录
|   ├── draft.md   # 默认模板
|   ├── page.md    # 页面模板
|   └── post.md    # 文章模板
├── source         # 资源目录,用来存放文章源文件
|   ├── _drafts    # 默认页面存放目录
|   └── _posts     # 文章存放目录
├── themes         # 主题目录,存放用来生成静态页面的主题
├── _config.yml    # hexo的配置文件
├── package.json   # hexo的依赖和插件信息
└── package-lock.json # npm已安装依赖的记录(具体来源和版本信息)

5.部署 Hexo 到 GitHub Pages

本地博客测试成功后,就是上传到 GitHub 进行部署,使其能够在网络上访问。

首先安装 hexo-deployer-git 插件:

npm install hexo-deployer-git --save

GitHub

然后在我们安装Hexo目录(4小节开头)下修改 _config.yml 文件末尾的 Deployment 部分,修改成如下【其中的用户名填3小节的Github Pages 仓库的前缀】:

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: master

https

Git

完成后运行 hexo d 命令将网站上传部署到 GitHub Pages。

GitHub

Hexo

完成!这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了【比如我的就是:jiahaoit.github.io】

Hexo

6.绑定域名(可选)

因为我们用的是GitHub Pages部署我们的网站,所以博客搭建完成使用的是 GitHub 的子域名(用户名.http://github.io),我们可以选择绑定自己的域名,反正买一个域名也才几十元一年【此处看个人情况选择】。

6.1 域名解析

我们购买完域名之后,需要完成域名备案,之后将域名解析到我们的GitHub Pages即可。我们首先要知道自己的GitHub Pages的IP地址,我们可以ping一下:

ping 用户名.github.io   #本文示范:jiahaoit.github.io

Hexo

由此,我得到了我的GitHub Pages的IP地址185.199.108.153,下面域名解析会用到。

我用的是阿里云域名,进入域名控制台 -> 域名列表 -> 点击域名后面的解析 -> 添加记录:

GitHub

填写自己的域名和刚才ping到的GitHub Pages的IP地址即可,其它选项一律默认即可。

Hexo

6.2 绑定域名到 Hexo 博客

进入本地Hexo博客安装目录下的 source 文件夹内,打开记事本,里面输入自己的域名,如 http://www.hexo.jhh.ink,保存名称为 “CNAME”,格式为 “所有文件”(无 .txt 后缀)。

GitHub

清除Hexo缓存并重新发布网站:

hexo clean   # 清除缓存文件等
hexo g       # 生成页面
hexo s       # 启动预览
hexo d       # 发布博客

6.3 自定义域名并开启 HTTPS

我们还需要设置Custom domain,打开自己GitHub Pages所在的仓库(用户名.github.io),点击Settings:

找到GitHub Pages选项,Custom domain填写自己的域名,点击Save按钮,然后勾选HTTPS选项。

https

ps:因为我用的子域名,所以图中没有配置HTTPS,其实是需要勾选HTTPS选项的。

HTTPS 证书部署成功需要一定时间,等大概几分钟再访问域名,就可以看到域名前面的小绿锁了,HTTPS 配置成功。

这时候我们再访问我们的域名,hexo.jhh.ink发现已经指向了我们的GitHub Pages页面了,Nice!大功告成:

Git

7.开始使用Hexo

我们博客的基本设置前面就已经讲完了,下面我们开始学习更好的使用Hexo。

7.1 常用命令

# 新建页面
hexo new page <页面名>
# 新建文章
hexo new post <文章名> #post可以省略

例如我们在GitBash中输入:

hexo new "My Fast HexoPages"

Hexo

然后 Hexo安装目录source_posts文件夹中会出现一个My-Fast-HexoPages.md 文件,此时就可以使用 Markdown 编辑器在该文件中撰写文章了。 也可以不使用命令自己创建 .md 文件,只需在文件开头手动加入如下格式 Front-matter 即可:

---
title: My Fast HexoPages
date: 2020-08-27 18:21:42 # 时间
categories: # 分类
- 测试
tags: # 标签
- FastHexo
- Test
---

摘要
<!--more-->
正文

写完后运行下面两条命令,将文章渲染并部署到 GitHub Pages 上完成发布。以后每次发布文章都是这样:

hexo g   # 生成页面
hexo d   # 部署发布
hexo s   # 本地预览  

Git

详细 hexo 命令

(来自婷婷的网站:https://www.idzd.top/archives/1485/)

官方文档:Hexo 指令【https://hexo.io/zh-cn/docs/commands】

# hexo初始化
hexo init <文件夹名> #如果 <文件夹名> 省略,则在当前目录初始化

# 新建页面
hexo new page <页面名>
# 新建文章
hexo new post <文章名> # post可以省略

# 生成静态文件
hexo generate
# 可简写为
hexo g

# 启动本地服务器
hexo server
# 可简写为
hexo s

# 清理生成的静态文件
hexo clean

# 部署静态文件
hexo deploy
# 可简写为
hexo d

# 生成静态文件并部署(二选一即可)
hexo d -g
hexo g -d

7.2 更换主题

我们可以去Hexo 官方主题页挑一个自己心仪的主题。

链接:https://hexo.io/themes/

网络安全

比如我现在下载了一个叫做 diaspora 的主题【PS:这个主题是我家婷婷维护的,欢迎来访:https://github.com/Fechin/hexo-theme-diaspora】,用Git将主题文件下载到Hexo安装目录 hemes文件夹下:

 git clone https://github.com/Fechin/hexo-theme-diaspora.git themes/diaspora

https

一般来说,都有主题说明文件README.md,按照文件配置主题信息即可:

Hexo

最后,在Hexo配置文件_config.yml中启用主题,找到 theme 关键字,替换默认主题为 diaspora :

Git

这时候,我们同样是用 hexo -c g s 命令生成页面,然后浏览器查看新主题即可:

Hexo

Hexo 是一种纯静态的博客,我们必须要在本地完成文章的编辑再部署到 GitHub 上,依赖于本地环境。不能像 WordPress 或 Typecho 那样的动态博客一样能直接在浏览器中完成撰文和发布。可以说是一种比较极客的写博客方式,但是优势也是明显的 -- 免费稳定省心,比较适合爱折腾研究的用户,或者没有在线发文需求的朋友。【参考文章:知乎crystal】

参考文章

1、Hexo搭建个人博客+切换主题+Github托管+自动构建全流程记录:

https://www.idzd.top/archives/1430/

2、使用 Hexo+GitHub 搭建个人免费博客教程(小白向):

https://zhuanlan.zhihu.com/p/60578464

3、hexo搭建个人网站博客完全教程:

https://juejin.im/post/6844903679858851853

浩Coding公众号

Java、数据库、前端相关

【程序猿硬核科普】系列

2020面试宝典、Linux教程

长按识别二维码关注

你点的每个赞,我都认真当成了喜欢

相关文章

  • windows安装配置git和ToriseGit

    windows安装配置git和ToriseGit,--------------------------安装完成,接下在是配置---------------------------------完成后,点击,下面的save public key和save private key,报错公私钥到任意目录就行。———————————————配置完毕,可以使用了—————————————————(1)公钥添加到代码仓库,私钥,在windows中搜索,Pageant,打开如下图。2、安装语言包,直接运行语言包程序,安装...
  • 用.NET做DDNS动态域名解析和SSL证书申请

    用.NET做DDNS动态域名解析和SSL证书申请,前几天用.NET玩IoT设备,拿出了角落吃灰的Jetson Nano。近期也买了一堆传感器,还在路上,准备到手之后,好好捣鼓一番。Nano设备呢,虽然没有一直开......

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。