基于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 ...
随机推荐
- 🏆【Alibaba微服务技术系列】「Dubbo3.0技术专题」回顾Dubbo2.x的技术原理和功能实现及源码分析(温故而知新)
RPC服务 什么叫RPC? RPC[Remote Procedure Call]是指远程过程调用,是一种进程间通信方式,他是一种技术的思想,而不是规范.它允许程序调用另一个地址空间(通常是共享网络的另 ...
- el-upload上传文件和表单一起提交+后端接收代码
目录 一.前言 二.前端页面展示 三.表单代码 四.Data部分 五.JS方法 六.后端接收方式 七.总结 一.前言 我们在做前端时,会遇到这样的需求,上传Excel文件,并且还要和填写的表单数据,一 ...
- 如何攻击Java Web应用
越来越多的企业采用Java语言构建企业Web应用程序,基于Java主流的框架和技术及可能存在的风险,成为被关注的重点. 本文从黑盒渗透的角度,总结下Java Web应用所知道的一些可能被利用的入侵点. ...
- QT学习日记篇-02-QT信号和槽
课程大纲: <1>给控件改名字 随着UI界面的控件变多,如果使用系统自带的名称,后期会让人不明觉厉,说白了,就是掌握C++的命名规则:易懂,条例清晰,人性化 方法:直接点击控件,进入右侧对 ...
- Linux下SSH以及SSH秘钥
一.基于秘钥方式实现远程连接 第一步:创建密钥对(在管理端服务器上操作) 中间的输入项可以直接回车 ssh-keygen -t dsa 第二步:分发公钥(在管理端服务器执行) 这个步骤需要输入一个ye ...
- rtl8188eu 驱动移植
测试平台 宿主机平台:Ubuntu 16.04.6 目标机:iMX6ULL 目标机内核:Linux 4.1.15 rtl8188eu 驱动移植 在网上下载Linux版的驱动源码: wifi驱动的实现有 ...
- adb 常用命令大全(5)- 日志相关
前言 Android 系统的日志分为两部分 底层的 Linux 内核日志输出到 /proc/kmsg Android 的日志输出到 /dev/log 语法格式 adb logcat [<opti ...
- GO安装golang.org/x/net扩展库
在学习golang过程中,有部分示例代码使用到了非标准库golang.org/x/net/html相关的库函数,但是标准代码库中没有该库,因此需要自己安装: 我这里使用git下载源码进行的安装. 为了 ...
- hyperf从零开始构建微服务(二)——构建服务消费者
阅读目录 构建服务消费者 安装json rpc依赖 安装JSON RPC客户端 server配置 编写业务代码 编写服务消费者类 consumer配置 配置 UserServiceInterface ...
- ysoserial CommonsColletions6分析
CC6的话是一条比较通用的链,在JAVA7和8版本都可以使用,而触发点也是通过LazyMap的get方法. TiedMapEntry#hashCode 在CC5中,通过的是TiedMapEntry的t ...