基于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 ...
随机推荐
- IDEA不自动提示仓库中有的包maven
- dubbo暴露原理及引用过程
服务暴露 服务引用:
- 刷题-力扣-剑指 Offer 42. 连续子数组的最大和
剑指 Offer 42. 连续子数组的最大和 题目链接 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/lian-xu-zi-shu-zu-de ...
- Supervisor服务开机自启动
要解决的问题 在机器上部署自己编写的服务时候,我们可以使用Supervisor作为进程检活工具,用来自动重启服务. 但是当机器重启后,Supervisor却不能自动重启,那么谁来解决这个问题呢? 答案 ...
- linux centos7 移动文件到指定目录
2021-08-26 在 centos7 环境下怎么移动一个文件到其他的目录下呢? 使用命令 mv 文件名 指定目录 即可完成该操作. 那么怎么将一个文件夹下的内容移动到另一个文件夹下呢?比如有时 ...
- blender skin modifier 太好玩了
https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/skin.html 只需要像画火柴人一样把点连起来,skin ...
- 为什么Class实例可以不是全局唯一的——自定义类加载器
为什么Class实例可以不是全局唯一的 通过定义两个类加载器加载同一字节码文件来证明Class实例为什么不是全局唯一的 1.将一个名为Demo(没有后缀)的字节码文件放在D盘根目录 2.定义两个类加载 ...
- 录制脚本启动报错:target controller is configured to “use recording Controller” but no such controller exists,ensure you add a Recording Controller as child of Thread Group node to start recording correctly
使用JMeter自带录制脚本元件录制,已配置好代理,启动时报错,如图 解决方案: 未指定录制请求信息的存放位置,下拉选择后重新启动即可 对于代理配置有疑问可见性能测试工具JMeter 基础(四)-- ...
- 深入理解Linux文件系统与日志文件
目录: 一.inode与block 二.inode内容 三.inode的号码 四.inode的大小 五.链接文件 六.inode节点耗尽故障处理 七.恢复EXT类型的文件编译安装extundelete ...
- win7下python2.7安装 pip,setuptools的正确方法
windows7 下 0.先安装python2.7.13 32位:https://www.python.org/ftp/python/2.7.13/python-2.7.13.msi 64位:htt ...