githubpage博客搭建(1)

一直想搭建github page将自己的一些笔记整理发布出来,这周末终于能抽出时间,看了若干他山之石,开始了搭建。这里我写下我自己的搭建过程,没有什么技术含量,仅记录我的理解,尽可能用简单的步骤先能搭建成功,再进行东西添加,其中趟的坑也一一在这里说明。

首先这里需要说明的是github page搭建主要需要具备两个方面的条件,github上的repo,本地的搭建、发布的工具。所以这里从两个方面说明。

github上的repo建立。

创建这里就不细说,需要注意的是需要创建一个和用户名相同的仓库,即username.github.io,这里只需要注意的是github page只允许有一个个人主页,必须按以上格式命名,但是可以有多个项目主页,因此也是还可以申请其它的repo来作为github page的。

本地环境。

可以选用不同的工具,这里使用hexo。网上教程较多的工具有hexo、jekyll。jekyll是基于Ruby,hexo基于node.js,相对来说hexo更方便好用。
环境配置:
(1)安装nodejs
windows下面直接下载安装包
linux下面centos中可以使用

1
$ yum install -y nodejs

安装完成以后可以使用node -v查看
(2)安装hexo

1
$ npm install hexo-cli -g

以上完成本地环境的安装。

搭建博客

(1)初始化

1
2
3
$ hexo init yunisaworld.github.io  //建立项目
$ cd yunisaworld.github.io //进入项目目录
$ npm install //安装npm

(2)生成页面

1
2
$ hexo clean
$ hexo g/hexo generate

(3)运行

1
$ hexo s/hexo server

这时候打开localhost:4000即可看到

博客编写

1
$ hexo new test  //写一篇文章

此时在source/_posts目录下面生成test.md文件,可以使用markdown在里面添加内容,然后重新

1
2
3
$ hexo clean
$ hexo g
$ hexo s

配置github的验证

有了仓库和本地的博客,则需要将本地博客部署到github远程仓库。这种部署需要有权限验证,不能什么人都可以上传,github有两种上传方式,一种是基于https,一种是基于ssh的,我先通过https连接,但是没有配置成功,上传显示失败,所以最后选择了ssh的验证方式,网上看到若干https上不去的,但是都没有说明原因。
(1)配置ssh key
在windows下面使用git bash

1
$ cd ~/.ssh  //查看本机是否存在ssh密钥

如果显示No such file or directory说明没有配置

1
$ ssh-keygen -t rsa -C "邮箱"

enter就可以了不用去配置其它东西。

然后将.ssh/id_ras.pub中的文本复制到github中。
选择settings

选择SSH and GPG keys,选择New SSH key

然后title随意起,下面key将内容复制进去即可,一般生成的时候会给邮箱发送邮件。

这时候可以在git bash中验证是否成功。

1
$ ssh -T git@github.com

可能出现如下问题

由于公司需要代理才能访问外网,所以这里需要在.ssh中配置一下代理,建立config文件,在文件中加入代理

1
2
Host *
ProxyCommand Connect -H [proxy] %h %p

此时在运行以上命令

则表示已经通过。

部署

(1)安装插件

1
$ npm install hexo-deployer-git --save

windows下面可能会显示安装错误,提示需要使用管理员来运行cmd,只需要在运行cmd的时候右键通过管理运行就可以了。
(2)修改配置文件
在yunisaworld.github.io目录中有一个配置文件_config.yml,修改发布配置deploy

(3)发布

1
$ hexo d/hexo deploy

最后显示如下,更新到github

通过https://yunisaworld.github.io/访问

修改主题

这里我使用了hexo-theme-next主题
在本地博客目录下clone该项目

1
$ git clone --branch v5.1.2 https://github.com/iissnan/hexo-theme-next themes/next

然后修改_config.yml文件的theme配置项
theme: next
重新启动

至此我们已经可以建立基本的静态博客页面了,接下来将详解如何去配置评论,显示,文章的设置等。