很久之前就知道Github可以发布自己的博客,因为仅支持静态文件,一直懒于动手自己进行编辑。再了解到还存在 JekyIIHexo 这样的内容生成框架后,终于决定体验一下。

一、本地环境准备。

Github Pages的申请过程就不再搬砖,Github的页面上说的很清楚,注意每个用户只能创建一个与自己用户名相同的Pages。

Pages申请好之后,可以克隆到本地的文件夹,这样 hexo 运行的文件夹就准备好,可以开始准备本地的hexo环境。

hexo需要有nodes和nam的支持,我先安装了6.9.2版本的node,使用的是安装包,当然也可以使用homebrew等工具。安装hexo很简单:

$ npm install hexo-cli -g

然后进入到 github Pages 的本地目录执行:

hexo init blog
cd blog
nam install
hexo server

当看到Hexo is running的提示之后,就可以按照提示的地址在浏览器中预览博客效果了。

_config.yml 是博客的配置文件,能够定义博客名称、作者等各种全局的参数。

package.json 应用数据,EJS、Sylus、Markdown三个渲染工具是默认安装的,如果不需要刻意卸载。但是对于最终要是使用 Markdown 来编辑博客的我来说,那是必不可少的。

source 文件夹,文章原始的 md 文件都放在这个文件夹下面。通过生成器会对该文件夹下的 markdown、html 文件进行解析,其他的文件只做拷贝,放入 public 文件夹。

themes 主题文件夹,默认的主题为 landscape。

二、主题更换。

默认的主题美观性基本上没有,hexo 支持自己开发博客主题,但是刚开始的时候最好还是选择一个比较成熟的主题先上手。hexo 官方有一个提供预览图的列表,也有一个更完整的列表,我这里要使用的是 yilia,后续考虑自己定义一个。

更换theme的步骤包括获取 theme 文件,修改配置,可以参考 yilia 的文档进行。

三、生成与发布

编辑完自己的文章后,本地预览觉得效果还可以的话,就可以生成等待发布的页面了。

hexo generate

执行完成后,可以在 public 文件夹下看到生成的文件。由此可以看到,hexo 中有原始的文档文件,也有发布后生成的网页文件。

修改 hexo 配置文件中关于部署的部分

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/yourname/yourname.github.io.git
branch: hexo

至此,使用 hexo 搭建环境发布内容的工作就完成了,你可以通过 http://yourname.github.io 访问页面,查看效果。

为了让这两部分文件都保存下来,我们利用 git 中的分支功能。在本地环境查看有多少分支 git branch -a,一般只有一个 master。创建一个新的分支 git branch hexo

将分支推送到远程服务器 git push origin hexo,在 hexo 的配置文件中选择将内容发布到 hexo 而本地的源码提交到 master 中。

Mac下体验Hexo与Github Pages搭建的更多相关文章

  1. 使用hexo、github Pages搭建博客

    1. 安装node 如果本机已经有node,为避免安装出现问题,建议先升级到最新版.参考:https://juejin.im/post/5b9739d1e51d450e9f66ee3b 2. 安装he ...

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

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

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

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

  4. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  5. Hexo + GitHub Pages搭建博客

    搭建 Node.js 环境 为什么要搭建 Node.js 环境? – 因为 Hexo 博客系统是基于 Node.js 编写的 Node.js 是一个基于 Chrome V8 引擎的 JavaScrip ...

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

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

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

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

  8. Hexo + Github Pages搭建的个人博客

    这个不算是新手的搭建流程,如果你恰巧看见这篇文章,希望你已经安装好node.git等软件,因为第一步的环境搭建准备并没有详写,默认都会了.希望能解决你的问题. 步骤: 一. 搭建环境准备 二.安装he ...

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

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

随机推荐

  1. Peter Norvig:自学编程,十年磨一剑

    若要在某一领域内达到专家级的水平,其关键在于"审慎地重复",也就是说,并非是机械地,一遍又一遍地练习,而是要不断地挑战自我,试图超越自身当前的水平,通过不断的尝试挑战,并在尝试的过 ...

  2. Git过滤文件和文夹

    今天是2016年10月份的最后一天,感觉时间过得真的是飞快呢,此刻天下着小雨,天气灰蒙如天每个人的心情一样.在此把这个月的项目上传到git上,就需要过滤一些项目自动生成的不必要的文件,如:bin,ob ...

  3. GPS部标监控平台的架构设计(七)-压力测试

    部标监控平台的压力测试是部标检测流程的最后一个检测环节,也是最难的,很多送检的企业平台都是卡壳在这一个环节.企业平台面临的问题如下: 1.对于压力测试的具体指标要求理解含糊,只知道是模拟一万辆车终端进 ...

  4. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  5. C#如何反射出委托的签名,如何使用反射调用委托

    本文阐述C#中如何反射出委托的签名,假如我们有委托FooDelegate定义如下 delegate double FooDelegate (string param, bool condition); ...

  6. Openstack的nova-network的vlan模式扩展

    openstack的nova-network的vlan模式是可以在安装的时候,将网络划分为多个子网,每个项目一个或者多个子网进行虚拟机创建.但是他现在代码级别上不支持:如果一开始安装的环境的vlan网 ...

  7. 【转】PowerShell 函数(Function)

    转至:http://blog.csdn.net/kk185800961/article/details/49022395 函数基本操作: [plain] view plain copy #创建函数 F ...

  8. 妈妈再也不担心我的编码问题了。中文编码融汇贯通,windows,django,python,java,html 【转】

    http://blog.csdn.net/farmer_cc/article/details/41830999 HTML编码:html文件是utf-8编码的,不确定的话用记事本打开,另存为的时候就能够 ...

  9. Texture tiling and swizzling

    Texture tiling and swizzling 原帖地址:http://fgiesen.wordpress.com If you’re working with images in your ...

  10. RobotFramework中加载自定义python包中的library(一个py文件中有多个类)

    结构如下: appsdk\ appsdk.py(这里面有多个类,包括appsdk,appsdksync等类) __init__.py ... ① 有个appsdk的文件夹(符合python包的定义) ...