我的个人技术博客搭建之旅

为什么要建站?

  • 从事iOS开发工作快一年了,一直觉得自己的能力提高的比较慢,想要快点提高自己的技术水平,因为这是一个快鱼吃慢鱼的社会
  • 写博客可以督促自己养成良好的学习思考记录总结的习惯
  • 之前的学习大都参考了很多牛人的博客。从他们的博客中已经学到了很多有用的知识和技术。程序员是一个伟大的职业,受到启发,想成为一个真正的程序员
  • 互联网时代,人人都是自媒体。个人博客是一个平台,可以用来展示自己,建立自己的个人品牌
  • 分享是一种美德。人人为我,我为人人

为什么要建独立的个人博客?

  • 喜欢自由,个人独立博客,可编辑定制空间大,不像第三方的博客系统,有很多不受自己控制的地方,比如文章页面出现广告,体验很不好
  • 自己动手搭建博客,可以顺便学习到一些网页,写作方面的知识或技能
  • 酷,有趣。程序员都追求酷,自己折腾,自己瞎改,改主题,改配置,改风格,绑定个性化的独立域名,甚至自己开发一套自己喜欢和满意的主题,一切都那么有趣和美好

    原理

    GitHub会为每一个注册用户分配一个300M的个人空间,所以和hexo结合起来,利用github给我们的免费空间,将我们的静态网页托管到上面,就实现了一个免费的搭建个人博客的方案。

主要涉及的技术名词

  1. Mac OS
  2. Git
  3. GitHub Pages
  4. Hexo
  5. Node.js
  6. npm
  7. Mou
  8. Markdown
  9. Sublime
  10. Jacman
  11. GoDaddy
  12. Gitcafe

如有不懂,请先google, 然后百度,反正我是这么做的

主要步骤

注册GitHub帐号,新建代码仓库

  1. 登录GitHub网站,注册一个帐号
  2. 新建一个代码仓库
  3. 填写仓库信息,其中仓库名称必须和用户名一样

环境配置

  1. 安装git。由于我使用的是MAC OS系统,自带了git功能,如果是其他系统,安装一个git客户端软件即可
  2. 安装Node环境,Hexo就是基于Node的,访问速度特别快。进入node.js官网,选对操作系统,安装即可

安装Hexo,初始化博客

git和node环境安装好了以后。接下来就可以安装hexo了,直接在命令行中敲入如下代码:

1
$ npm install -g hexo-cli

接下来建站

1
2
3
$ hexo init <folder>  # 初始化博客,<文件夹名称>,表示文件会下载到当前目录下的这个文件夹内
$ cd <folder> # 进入到这个文件夹目录
$ npm install # 安装npm

使用相关编辑器打开这个文件夹<folder>中的文件夹,我是用的是subLime

本地预览

1
$ hexo server # 开启本地服务器

然后在浏览器里面输入网址http://localhost:4000,就能看到默认主题的界面

这是因为初始化hexo的时候就已经把一个能够起小型的网路服务器功能的依赖装好了,所以启动一下这个本地服务,就能看到hexo的默认主题

上传到远程代码仓库

接下来就要将本地的代码上传到远程github仓库。首先建立和之前新建的代码仓库之间的关联,利用ssh key,具体是先用命令行在本地生成一个ssh key,然后复制到github上去。

(1)先检查本地有没存在ssh key

1
$ ls -al ~/.ssh  # 列出在.ssh文件夹下所有的文件,如果存在这个文件夹或者这些文件的话

(2)生成新的ssh key

1
$ ssh-keygen -t rsa -C "your_email@example.com" # 注意将`your_email`替换成之前注册github帐号时的邮箱

生成成功后进入到~/.ssh/id_rsa.pub路径下,用文件编辑器打开id_rsa.pub文件,里面的内容就是ssk key,将内容复制到剪切板

  1. 登录GitHub网站,依次点击Settings –> SSH and GPG keys –> New SSH key,进入新建SSK key页面,随便填写一下Title,然后将剪切板中复制好的ssh key复制到key中去,最后点击Add SSH key按钮,就OK了

  2. subLime打开博客主目录,找到主目录在的_config.yml文件,编辑这个文件,找到最下方deployment模块(顺便找到Site模块,修改一下博客的titile,subtitle,author,改成你自己个性化的
    ),将deployment模块里面的代码替换为如下:

1
2
3
4
deploy:
type: git
repository: https://github.com/用户名/用户名.github.io.git # 将用户名替换为你自己的github用户名
branch: master

特别提醒:每个分号:后都要有一个空格,不然接下来生成和部署博客到github上时会报下面这种错误:

1
JS-YAML: bad indentation of a mapping entry at line , column

(3)进到博客根目录下,先执行

1
$ hexo generate       # 或者:hexo g  生成静态页面至public目录

如出现报错

1
2
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

则执行:

1
$ npm install hexo --save

再执行:

1
$ hexo deploy  # 或者:hexo -g   将.deploy目录部署到GitHub

如果无法连接到git,则执行:

1
$ npm install hexo-deployer-git --save  # 安装hexo-deployer-git

最后再执行:

1
2
$ hexo g
$ hexo d

(4)进到浏览器,打开http://用户名.github.io网址,就可以看到和之前本地看到的hexo默认主题的首页,看到你修改好的博客title,subtitle,author,等。至此,和github的关联已经建立好,接下来就可以写博客了

写博客

写博客主要使用到几个命令:

1
2
$ hexo new "postName" # 新建文章 默认在\source\_posts\postName.md文件夹下
$ hexo new page "pageName" #新建页面,如关于我界面

新建后,在source文件目录下生成一个以postName命名的.md文件,直接用markdown语法编辑,写文章就是这么简单。hexo可以将markdown语法的文件渲染成静态的HTML。关于markdown语法,非常简单,上手很快,可以上网去搜一下语法Markdown 语法说明 (简体中文版)

$ hexo clean # 删除之前生成的public文件夹和缓存数据
$ hexo g     # 重新生成博客文件
$ hexo d     # 将修改同步到github远程仓库

换主题,个性化配置

1.更换主题

进入hexo相关主题展示的theme网站,选取一款你喜欢的主题。将你喜欢的主题clone到themes文件夹下,我选的是jacman主题,直接编辑主目录下的_config.yml配置文件,找到theme,将默认的主题换成你喜欢的主题名即可

2.配置主题样式

换完主题后,就可以修改主题样式了,我以我的jacman主题为例,主要修改主配置文件_config.yml以及主题文件下的配置文件_config.yml,我把底部的作者介绍给删掉了,然后右边的展示插件widget,我添加了分类,标签,归档,标签云,友情链接这几项。

3.添加第三方评论系统

我使用的是多说,直接注册,然后获取到duoshuo_shortname,填到jacman主题下面配置文件_config.yml对应的地方,第三方评论系统就安装好了

4.其他

还有些站内搜索流量统计等功能的配置,直接参考jacman主题的配置说明和介绍,里面很详细

申请域名并绑定

1.申请

如果向像我的博客一样,有一个独立专属的个性化域名,那么就需要去购买一个,然后和用户名.github.io这个网址进行绑定就可以了,购买域名推荐GoDaddy,不用备案,支持支付宝付款,购买完成后去到域名管理中心,给域名添加一条A记录,指向github的主机地址。

2.绑定

在/themes/你的主题/source目录下新建一个文件,文件名为CNAME,编辑这个文件,将你之前申请的域名填入到这个文件里.
然后打开命令行,cd 到博客目录

$ hexo clean
$ hexo g
$ hexo d

一切做好后,在浏览器里输入你的个性域名,就可以访问到你的博客了

迁移到GitCafe

由于github是国外的网址,服务器在国外,国内这边访问起来比较慢,若向提高网站的访问速度,一般的替代解决方案是把博客部署到gitcafe上来

主要参考资料

  1. [BetterExplained]为什么你应该(从现在开始就)写博客
  2. 趣谈个人建站
  3. 作为码农,我们为什么要写作
  4. 技术人员如何坚持写作
  5. Mac上搭建基于GitHub的Hexo博客
  6. 如何生成SSH key
  7. 从 Octopress 迁移到 Hexo
  8. hexo+github搭建个人博客
  9. hexo你的博客
  10. 大道至简——Hexo简洁主题推荐
  11. 极客学院Wiki社区hexo问题解答
0%