概念

  • Github Pages可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。
  • Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

    Hexo渲染的博客页面简洁美观,支持Markdowm,用户可在本地编辑好文章,使用git工具push到github。

实操

以下是在Mac电脑上进行的操作

1.安装node.js

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

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搭建的博客的更多相关文章

  1. 基于 Hexo + GitHub Pages 搭建个人博客(二)

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

  2. 基于 Hexo + GitHub Pages 搭建个人博客(三)

    一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...

  3. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  4. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  5. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  6. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  7. 使用github pages搭建个人博客

    一.环境准备 使用Github Pages搭建个人博客,一劳永逸,可以让我们更加专注于博客的撰写.博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的,所以我们本地需要 ...

  8. Hugo + Github Pages 搭建个人博客

    尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...

  9. 使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客

    准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm i ...

随机推荐

  1. HTML基本语法(慕课网学习笔记)

    标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  2. Python - 面向对象编程 - 实例方法、静态方法、类方法

    实例方法 在类中定义的方法默认都是实例方法,前面几篇文章已经大量使用到实例方法 实例方法栗子 class PoloBlog: def __init__(self, name, age): print( ...

  3. Python实现GPU加速的基本操作

    技术背景 之前写过一篇讲述如何使用pycuda来在Python上写CUDA程序的博客.这个方案的特点在于完全遵循了CUDA程序的写法,只是支持了一些常用函数的接口,如果你需要自己写CUDA算子,那么就 ...

  4. Dockerfile 实践及梳理

    Dockerfile 是一个文本文件,我们可以通过组合一条条的指令 (Instruction),来构建满足我们需求的 Docker 镜像 文档 Best practices for writing D ...

  5. Redis的读写分离

    1.概述 随着企业业务的不断扩大,请求的并发量不断增长,Redis可能终会出现无法负载的情况,此时我们就需要想办法去提升Redis的负载能力. 读写分离(主从复制)是一个比较简单的扩展方案,使用多台机 ...

  6. 基本ServletWEB项目

    项目搭建 项目链接https://gitee.com/zhangjzm/smbms.git 前置知识,Servlet JSP 结构图 搭建maven web项目 1.搭建一个maven web项目 2 ...

  7. Flex语法和常用鼠标手势

    Flex弹性和模型 1.display : flex/inline-flex ;(设置给氟元素) flex : 将对象作为弹性伸缩盒显示: inline-flex : 将对象作为内联块级弹性伸缩显示: ...

  8. 谈谈Linux系统启动流程

    @ 目录 大体流程分析 一.BIOS 1.1 BIOS简介 1.2 POST 二.BootLoader (GRUB) 2.1 What's MBR? 2.2 What's GRUB? 2.3 boot ...

  9. docker run配置参数

    Usage: docker run [OPTIONS] IMAGE [COMMAND] [ARG...] -d, --detach=false 指定容器运行于前台还是后台,默认为false -i, - ...

  10. scrum项目冲刺_day11 第一阶段总结

    "智能垃圾分类APP"第一阶段总结 总任务: 一.appUI页面(已完成) 二.首页功能: 1.图像识别功能(已完成) 2.语音识别功能(已完成) 3.垃圾搜索功能(基本完成) 4 ...