基于Hexo+Github Pages搭建的博客
概念
- Github Pages可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。
- Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Hexo渲染的博客页面简洁美观,支持Markdowm,用户可在本地编辑好文章,使用git工具push到github。
实操
以下是在Mac电脑上进行的操作
1.安装node.js
- 下载并安装node.js(node.js历史版本:https://nodejs.org/zh-cn/download/releases/)
由于node.js中包含了npm包管理器,安装好node.js后,命令:npm -v
可发现npm也安装好了。
2.安装hexo
- 找个保存博客的位置,新建文件夹Blog,作为Hexo的根目录,然后cd Blog。
- 在Hexo根目录下安装hexo,命令:
npm install hexo-cli -g
然后初始化hexo(其中生成了package.json和package-lock.json文件,里面记录了hexo的依赖包)
hexo init
安装hexo的依赖包(比如hexo-deployer-git,可用于部署到github上)
npm install
默认在Hexo根目录/source/_posts目录下已经有hello-world.md文件,是一篇文章,将该文章生成静态文件:
hexo g
生成的静态文件存放在Hexo根目录/public目录下,此时可以启动本地服务器了
hexo s
用浏览器打开http://localhost:4000/ 查看效果,默认页面效果如下:

本地设置好后,接下来开始关联Github。
3.创建仓库
- 登录你的Github帐号,新建仓库,仓库名称必须以"用户名.github.io"的格式命名,命名格式是Github Pages的要求。
4.添加ssh key到Github
- 4.1.检查SSH keys是否存在Github
执行如下命令,检查SSH keys是否存在。
ls -al ~/.ssh
如果有文件id_rsa.pub或id_dsa.pub,则直接进入步骤4.3将SSH key添加到Github中,否则进入步骤4.2生成SSH key。
- 4.2.生成新的SSH key
执行如下命令,一路按回车(如果设置了密码请记住),生成public/private rsa keypair(即mac电脑的公私钥匙对),注意将your_email@example.com 换成你自己注册Github的邮箱地址
ssh-keygen -t rsa -C "your_email@example.com"
默认会在~/.ssh路径下生成id_rsa和id_rsa.pub两个文件。
- 4.3.将SSH key添加到Github中
前往并打开~/.ssh/id_rsa.pub,里面的信息就是mac电脑的公钥钥匙(即SSH key),将其拷贝到Github的Add SSH key页面即可。
操作步骤:进入Github --> Settings --> SSH keys --> add SSH key:
Title里任意添一个标题,将复制的内容粘贴到Key里,点击下方Add key绿色按钮即可。
5.发布文章
- cd到Hexo根目录,执行如下命令新建文章:
hexo new "postName"
postName.md文件会创建在Hexo根目录/blog/source/_posts下,postName.md是一篇无正文的文章,可进行编辑,文章编辑完后,执行以下命令将文章生成静态文件,并部署发布到Github上:
hexo generate //生成静态页面
hexo deploy //将文章部署到Github
注意:如果执行hexo deploy出现报错信息:The "mode" argument must be integer. Received an instance of Object,则是由于node.js和hexo存在版本适配问题,即一个版本过高,一个版本过低导致。
解决办法是安装一个低版本的node或将hexo更新至高版本。
6.安装theme
- 到Hexo官网主题页寻找喜欢的theme,这里以Github-Archer为例。
cd到Hexo根目录下执行命令:
git clone https://github.com/fi3ework/hexo-theme-archer themes/archer
将Hexo根目录下_config.yml里theme字段的值修改为archer。
Archer Readme.md中描述了启动侧边栏,需在Hexo根目录下的_config.yml中添加相应字段,具体字段请到Archer Readme.md中查看,这里不做说明。
然后执行如下命令:
hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g //生成缓存和静态文件
打开http://localhost:4000/ 便可预览博客archer主题。
预览效果没问题的话就可用命令hexo d把文章部署到Github上。部署完后,需要等几分钟,Github上面的预览效果才会更新。
hexo命令汇总
以下命令必须在Hexo根目录下进行。
何为Hexo根目录?找个位置新建一个文件夹命名为Blog(名字随意),该文件夹即可作为Hexo的根目录。
- hexo generate(hexo g):生成静态文件
- hexo server(hexo s):启动本地服务器,以便预览。默认情况下,访问网址为: http://localhost:4000/
- hexo deploy(hexo d):部署文章到远端服务器
- hexo new "文章标题":新建一个空文章,会在Hexo根目录/source/_posts文件夹下生成"文章标题.md"文件
- 文章写好后,每次发布前,要将写好的文章生成静态文件,执行hexo g。
生成的静态文件会放在Hexo根目录/public目录下,该目录下的内容就是我们要部署到github的内容。此时执行hexo d,静态文件便会部署到github上。
资料
基于Hexo+Github Pages搭建的博客的更多相关文章
- 基于 Hexo + GitHub Pages 搭建个人博客(二)
在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...
- 基于 Hexo + GitHub Pages 搭建个人博客(三)
一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...
- 基于 Hexo + GitHub Pages 搭建个人博客(一)
前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...
- 使用Hexo + GitHub Pages 搭建个人博客
一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...
- Hexo + Github Pages 搭建个人博客
之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...
- 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- 使用github pages搭建个人博客
一.环境准备 使用Github Pages搭建个人博客,一劳永逸,可以让我们更加专注于博客的撰写.博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的,所以我们本地需要 ...
- Hugo + Github Pages 搭建个人博客
尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...
- 使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客
准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm i ...
随机推荐
- Spring Data JPA:解析CriteriaBuilder
源码 在Spring Data JPA相关的文章[地址]中提到了有哪几种方式可以构建Specification的实例,该处需要借助CriteriaBuilder,回顾一下Specification中t ...
- 收下这7款插件,让你在使用 Vite 的时候如虎添翼
相信已经有不少小伙伴已经开始用 Vue3 做开发了,也一定使用上 Vite 了,而我今天要介绍的这几款插件,能让你在使用 Vite 做开发时如虎添翼. vite-plugin-restart 通过监听 ...
- Python习题集(九)
每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 已知一个数列:1. ...
- unity渲染篇:烘焙模型贴图
今天要来做一件有趣的事情,那就是把一个模型数据烘焙到贴图上! 什么意思?就是下面酱紫,把这只小喵从第一张图拍扁,变成第二张图的样子(似乎有点残忍~) 可能你经常会从美术那边听到"烘焙光照贴图 ...
- Golang入门学习(三):函数
文章目录 2.3 函数 2.3.1 基本语法 2.3.2 入门demo: 2.3.3 函数递归: 2.3.4 函数注意事项 2.3.5 init函数 2.3.6 匿名函数 2.3.7 闭包 2.3.8 ...
- fwm环境APP菜品数据加载失败的优化操作
1)在项目的.env文件中添加如下一行: RESPONSE_CACHE_ENABLED=true 2)拷贝 laravel-worker.conf.example,将laravel字段替换为域名,并执 ...
- JS015. 数据存储方式与位置(堆内存、栈内存、指针)
数据 - 基本类型 Undefined , Null , String , Number , Boolean , Symbol (ES 6) , 基本数据类型存储在栈内存中. 数 ...
- AspectJ——AOP框架快速入门
一.导包 二.bean.xml配置 三.环绕通知 四,表达式
- Servlet处理带尾部斜杠/的URI
有一个需求:让一个Servlet能够同时处理形如/XXX/YYY和/XXX/YYY/的URI,即URI尾部的斜杠有没有都要能处理到. 很容易想到,做两个URL Pattern/XXX/YYY和/XXX ...
- LinkedList 添加元素源码解析
jdk版本:1.8 LinkedList添加元素有两个方法:add(E e)和add(int index,E e). add(E e) /** * Appends the specified elem ...