github pages

日子总是像从指尖渡过的细纱,在不经意间悄然滑落。那些往日的忧愁和误用伤,在似水流年的荡涤下随波轻轻地逝去,而留下的欢乐和笑靥就在记忆深处历久弥新。

  现在的博客用的是 github 上的 github page 服务,准确说是 user page服务,今天突然有需求弄个 organizations page,所以从新建组织到使用 page 的服务全部弄了遍,因为 user pageorganizations page 流程大体相同,所以将二者重新整理下

一、准备部分

1.1 准备 organizations 账号

从蒋鑫大大的文章中可以看到:组织是非登录账号,不能像创建普通登录账号那样直接创建,而是需要以 GitHub 用户身份登录,然后再创建自己的组织,创建者成为组织天然的管理者。所以第一步根据自己的 github 账号创建一个组织


基础信息

邀请成员,这部可以跳过

到此,一个 organizations 就创建完成了,下面就可以按照自己的需要创建 repo,创建 team 等一些列操作,蒋鑫大大的文章中写的很清晰,这里不再赘述

1.2 使用 pages 服务

1、创建 repo,用来存储生成的 page 生成的代码

这里的步骤和 user page 的步骤相同,user page 是创建自己 username.github.io,这里就是 organization_name.github.io

2、初始化 repo,提交代码

# 下载 repo
git clone git@github.com:<organizations_name>/<organizations_nam>.github.io.git

# 新增内容
echo "organizations pages success..." > index.html

# 提交并推送
git add index.html
git commit -m "first commit"
git push origin master

稍等片刻,浏览器访问https://<organization_name>.github.io/ 可以看到
organizations pages success...

到此,就全部完成了organization pages 基础部分了,至于下面用什么框架来生成内容都看列为看官的兴趣爱好了,我的博客使用的是基于 nodejs 的 hexo 来生成静态博客的内容,当然了,对 organization page 也是可行的,不过静态博客的框架还有很多,看自己习惯哪个了…

1.3 使用静态博客框架

其他框架可能得参考下往上的文章了,这里我是用的 hexo,就理清怎么用 hexo 搭建吧,往上的详细教程特别多,这里不再赘述,主要还是要弄清楚思路和流程

  刚才其实上面说了,整个流程大致是【准备 github 账号 -> 准备 repo -> 本地使用静态博客框架生成博客内容 -> 推送到 repo,展现 -> 自定义域名、主题、优化等】

  上面的内容已经完成了 github 仓库的内容,剩余的内容可以全部在本地完成,本地无非是需要个环境来用框架生成博客内容,本地预览等等一些列功能,主流的博客框架都支持这些基本的功能。我这里环境是 osx,其他环境可能得看官自己尝试一下

1、准备 node 环境

这里可以用 brew install node 来装,也可以源码,也可以下载官方提供的 mac 专用的包来,也可以先装 nvm 等版本控制器,这里推荐使用 nvm

使用 brew 安裝 NVM

$ brew install nvm

将下面内容加入 .bash_profile(或 .zshrc

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

重新載入生效

$ source .bash_profile
$ source .zshrc

测试即可

$ nvm

Node Version Manager

Usage:
nvm help Show this message
nvm --version Print out the latest released version of nvm
nvm install [-s] <version> Download and install a <version>, [-s] from source. Uses .nvmrc if available
nvm uninstall <version> Uninstall a version
nvm use <version> Modify PATH to use <version>. Uses .nvmrc if available
nvm run <version> [<args>] Run <version> with <args> as arguments. Uses .nvmrc if available for <version>
nvm current Display currently activated version
nvm ls List installed versions
nvm ls <version> List versions matching a given description
nvm ls-remote List remote versions available for install
nvm deactivate Undo effects of `nvm` on current shell
nvm alias [<pattern>] Show all aliases beginning with <pattern>
nvm alias <name> <version> Set an alias named <name> pointing to <version>
nvm unalias <name> Deletes the alias named <name>
nvm reinstall-packages <version> Reinstall global `npm` packages contained in <version> to current version
nvm unload Unload `nvm` from shell
nvm which [<version>] Display path to installed node version. Uses .nvmrc if available

Example:
nvm install v0.10.32 Install a specific version number
nvm use 0.10 Use the latest available 0.10.x release
nvm run 0.10.32 app.js Run app.js using node v0.10.32
nvm exec 0.10.32 node app.js Run `node app.js` with the PATH pointing to node v0.10.32
nvm alias default 0.10.32 Set default node version on a shell

Note:
to remove, delete, or uninstall nvm - just remove ~/.nvm, ~/.npm, and ~/.bower folders

安装 nodejs

$ nvm install 0.11.16
nvm ls
v0.10.33
v0.11.0
v0.11.11
-> v0.11.16
system
default -> v0.11.0
stable -> 0.10 (-> v0.10.33) (default)
unstable -> 0.11 (-> v0.11.16) (default)

2、安装 hexo

安装完了 nvm,node ,下面用的就是 npm 来安装包,推荐把 npm 的源换成国内的淘宝源吧,具体原因你们懂的

$ npm install hexo-cli -g	#如果这里用的官方源,可能会经常失败

二、开始写作

完成了上面所有,那么现在博客框架所需的东西已完成,接下来就可以开始写作了

1、生成本地博客

$ hexo init blog	# 本地会生成一个目录
$ cd blog
$ ll
.
├── _config.yml # 站点配置文件
├── package.json # 应用程序的信息
├── scaffolds # 模版。新建文章时,Hexo 会根据 scaffold 来建立文件
├── source # 资源文件夹是存放用户资源的地方
| ├── _drafts
| └── _posts
└── themes # 主题。Hexo 会根据主题来生成静态页面。

$ npm install # 安装博客所需要的插件
$ hexo server # 生成本地的端口和服务,用于查看博客

2、写文章

$ cd blog

# 新建文章
$ hexo new [layout] <title>
$ vim source/_posts/<title>.md

# 注意上面这几行,可能生成的会不同,这几个参数就是控制文章的分类,标题,创建时间,tags
---
title: xxxx
tags: [xxx,xxx]
date: 2017-03-01 16:05:39
category: xxx
---

更加详细的可以在这里找到 https://hexo.io/zh-cn/docs/configuration.html

3、这里文章如果写完了,接下来生成内容

# 生成静态文件
$ hexo generate

# 启动服务器。默认情况下,访问网址为: http://localhost:4000/。
$ hexo server

这里本地查看文章的状态,格式啊等等,如果确认无误了,表明文章本地生成完全没有问题了,如果有问题,可以接着修改再次本地查看,直到满意为止

更多命令请查看 https://hexo.io/zh-cn/docs/commands.html

4、将本地生成好的内容推送到远端仓库中,这里就是 github 中的那个 repo

# 编辑站点配置文件
$ vim blog/_config.yml

# 找到如下的部分
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:<username>/<username>.github.io
branch: master


# 修改完保存执行以下命令
$ hexo deploy

如若推送成功,稍等片刻,再次访问 pages 服务的域名,就可以看到刚才本地生成的内容了,以后写作-生成内容-推送 就是这么个流程…

  剩下的就是自定义域名啊,切换主题啊,优化等等,每个人口味不同,这里大家都去 google 上找找相关的文章,很多很多,后续的部分都不会影响写作,以后有机会在写吧…

  

参考阅读