基于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 ...
随机推荐
- git cherry-pick 教程
转自:http://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html 对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求. 这时分两 ...
- jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- hdfs数据迁移
有时候可能会进行hadoop集群数据拷贝的情况,可用以下命令进行拷贝 需要在目标集群上来进行操作 hadoop distcp hdfs://192.168.1.233:8020/user/hive/w ...
- C#多线程开发-线程基础 01
最近由于工作的需要,一直在使用C#的多线程进行开发,其中也遇到了很多问题,但也都解决了.后来发觉自己对于线程的知识和运用不是很熟悉,所以将利用几篇文章来系统性的学习汇总下C#中的多线程开发. 线程基础 ...
- CSS布局中最小高度的妙用
CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...
- GoLang设计模式3 - 抽象工厂模式
之前我们介绍了工厂设计模式,现在我们再看一下抽象工厂设计模式.抽象工程模式顾名思义就是对工厂模式的一层抽象,也是创建型模式的一种,通常用来创建一组存在相关性的对象. UML类图大致如下: 类图比较复杂 ...
- JVM(一)类加载器与类加载过程
JVM是面试必面的一个知识点,也是高级程序员必备的一个技能.以下是JVM整体核心内容,包括类加载系统,运行时数据区内部结构,执行引擎,本地方法接口. 首先来学习类的加载器,虚拟机把描述类的数据从Cla ...
- Robot Framework 面试题
什么是 RF 基于可扩展关键字驱动的自动化测试框架 什么是可扩展关键字驱动 可扩展意味着可以自己开发,也可以调用第三方的关键字库 关键字驱动意味着测试用例都是围绕着关键字运行的 RF 的原理(框架?) ...
- Spring Boot 入门系列(二十七)使用Spring Data JPA 自定义查询如此简单,完全不需要写SQL!
前面讲了Spring Boot 整合Spring Boot JPA,实现JPA 的增.删.改.查的功能.JPA使用非常简单,只需继承JpaRepository ,无需任何数据访问层和sql语句即可实现 ...
- JAVA安全基础之代理模式(一)
JAVA安全基础之代理模式(一) 代理模式是java的一种很常用的设计模式,理解代理模式,在我们进行java代码审计时候是非常有帮助的. 静态代理 代理,或者称为 Proxy ,简单理解就是事情我不用 ...