一名设计师的github + hexo小白搭建日志

背景故事

想当年,blog还盛行的时候,是有很多给我们这些广大群众分享日记的选择。早先的blogbus之类的,后来用起了点点等轻博客,里面有好多好看的模板,而且可以自定义,当时就好奇这些自定义可以怎么搞,然后战战兢兢的在自定义代码里贴上了虾米播放器的代码,生成了一个博客歌单,成功后竟然有点小激动呢。还有WordPress这种神奇的东西,听说也是很厉害的样子,结果注册一个后也因为当时年少,脑内信息还太少,一头雾水根本不知道怎么搞就搁置了。

工作原因,接触了git和github(因为每天要跟程序员撕嘛,他们用的啥东西多少还是了解些的),随后知道有个GithubPages这么个玩意儿,似乎要比woedpress等简单,因为本身就有在用github,看起来是博客搭建起来后,只要往github里自己的repositories(也就是仓库)里提交就可以更新维护了。与此同时,使用一个叫HEXO的东西,它是一个简单方便的博客框架,省的自己一行一行的写前端页面来构建博客了。

听起来很cool呀!就决定再次开始折腾吧!


查了好多的资料,感谢很多人分享的经验。一个又一个奇怪的术语,不懂的概念,参考别人的教程,但也遇到了自己奇怪的问题,全靠google活了下来。
在此记录我的搭建日志(主要怕脑子不好回头忘了哈)

另外我使用的是mac,所以记录的都是mac下的搭建过程。

非常感谢这些文章的帮助:
Mac下搭建Hexo博客教程
MAC 上 github + hexo 搭建博客教程
我的博客是如何搭建的(github pages + HEXO + 域名绑定)
利用github-pages建立个人博客


始めましょう!!

准备工作和基本科普

第一步:注册Github

如果你没有github账号,那就要先去注册一个。 https://github.com/

小白注解:github就是给程序员用的托管代码的,当然我们其他人也可以往上面传些东西,主要好处就是可以多人协作,每个人一个分支,你也传一份,我也传一份(这个行为叫push),大家在时间轴上汇聚成一个整体(这个整体叫master),master可以进行版本控制,找到以前的版本。我们的博客的资料到时候就会全部放在自己在github的仓库里。

注册步骤没什么特殊的,注册完成后,我们要新建一个仓库 new repository

一名设计师的github + hexo小白搭建日志_第1张图片
新建项目.png-80.7kB

第二步:安装Git

github上的仓库(repositroy)建立完成后,我们还有在电脑上安装一下Git,这样方便我们把本地的项目push到线上仓库里。

到安装软件的时候了,接触到一个新东西,叫Homebrew.

小白注解:以我的理解,这个是一个很酷炫的,外行人看起来很黑客的一种安装软件包的方法,我们知道在windows里可以通过cmd输入命令行来执行一些指令(哀家就会查个ipconfig啥的),mac里的命令行工具是Terminal(终端)。当mac安装了homebrew后,就可以很方便的安装一些git上的或者其它啥啥我也不知道哪来的程序包了

http://brew.sh/ 打开hombrew的官网,按照网站说明,只要在Terminal输入一行

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

就可以安装homebrew了,随后,就可以在终端里说homebrew都能听懂的话让他做事啦。

比如"嘿,brew给我装个GIT吧":

brew install git

这样我们就安装好了Git。如果出现问题,尝试在指令前加入sudo,sudo可以获得root权限,执行带有sudo的指令电脑会要求你输入密码。

第三步:安装Node.js

这个是什么呢?反正也是我们需要运行博客的一个环境,跟web服务器相关的东西,hexo需要他。

装node之前我们要先安装 nvm

这又是个啥呢?这个是个mac下的 node 管理工具,管理版本更新的
在终端中输入以下指令:

git clone git://github.com/creationix/nvm.git \~/nvm
echo ". \~/.nvm/nvm.sh" \>\> \~/.bash\_profile

我在这一步的时候遇到了问题, 我的home目录下没有 bash_profile这个文件。解决办法是要用终端命令行自行创建一个(也见识到了啥叫linux命令)

1.进入home目录 cd~
2.创建 touch.bash_profile
3.打开 open.bash_profile
4.然后编辑文件 输入open -e .bash_profile
5.保存,关闭文件
6.输入source.bash_profile

参考文章 :
http://blog.csdn.net/edai9508/article/details/6006269
http://www.jianshu.com/p/a6044bd2ad35

安装好后,重开一下终端,输入:

nvm install v0.8.14
nvm use v0.8.14
nvm alias default v0.8.14

Node.js就安装完成了。

第四步:配置SSH keys

打开GitHub,在右上角头像处菜单找到setting,点击左侧的ssh and gpg keys,添加一个SSH keys。SSH keys的好处是让我们以后在本地进行操作并同步到GitHub上时不用输密码。

打开终端 输入如下代码:

cd \~/. ssh

这行代码能够帮助你检查电脑上现有的SSH key。
如果提示:No such file or directory说明没有key文件,输入以下代码生成新的key文件:

ssh-keygen -t rsa -C "邮件地址@youremail.com"

这里的邮件地址填自己注册时的邮件地址,注意大小写,双引号不能省略,终端会返回代码让你确定文件名,回车就好。

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/DoubleD/.ssh/id\_rsa): //回车就行

接着会让你输入加密串,可以空着:

Enter passphrase (empty for no passphrase):\<输入加密串\>
Enter same passphrase again:\<再次输入加密串\>

看到如下所示的输出,就代表你已经成功的创建了一个SSH key。


一名设计师的github + hexo小白搭建日志_第2张图片

找到本机上的id_rsa.pub文件,打开它(建议使用Sublime Text)复制里面的代码,记得不要多复制空格或换行,添加到下图位置:


一名设计师的github + hexo小白搭建日志_第3张图片
add-key.png-25kB

然后点击Add key就配置好了SSH key。输入下面的指令测试是否配置成功:

ssh -T [email protected]

如果返回的结果如下:

he authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

输入yes,就能看到

Hi YourID! You've successfully authenticated, but GitHub does not provide shell access.

这样你的SSH key就配置完成了。完成之后,我们设置好个人信息,用于提交代码说明是谁提交的,怎么联系。可以用以下指令完成:

git config --global user.name "你的名字"
git config --global user.email  "你的邮箱"

第五步:购买域名

虽然GitHub Pages提供了二级域名,比如xxxxx.github.io.不过有个自己的独立域名不是很兴奋吗?而且也不贵。这里大家都推荐的是Godaddy,https://www.godaddy.com .com域名一般每年收费70块不到。

解析域名

因为GoDaddy的DNS服务不稳定,会被墙,所以建议换成DNSPod的解析服务。

  • 什么是域名解析?
    域名就是我们平常所说的网站名 比如百度 baidu.com 、腾讯QQ qq.com
    而我们之可以可以通过网站名访问网站,实际是访问的网站地址对象的 ip 地址对应的主机
    通过网站名访问网站是对域名做了一个解析, 比如我要上 老王家,你就把老王的门牌号告诉我,我就可以找到老王家。 老王 就是域名, 门牌号 就是 ip 地址。

因此我们首先需要知道我们 githubpage 的ip地址
ping 到我们的gitHubPages的ip地址

ping http:xxxxxx.github.io

然后就可以看到ip地址

  • 域名绑定ip地址
    注册dnspod后,添加你购买的域名地址,然后点击域名进入解析设置,添加两条记录
    添加等级域名 www ,就可以通过 www.xxxx.com 来访问网站
    添加 @ , 就可以直接通过 xxxx.com 来访问网站

    一名设计师的github + hexo小白搭建日志_第4张图片
    dnspod.jpg-86.3kB

  • 去GoDaddy修改dns

首页顶部头像处快捷进入manage my donmains
小齿轮选择manage dns
修改dns server为dnspod的域名解析


一名设计师的github + hexo小白搭建日志_第5张图片

安装Hexo

前面都是准备工作(心好累),现在开始我们要安装博客框架hexo,通过他会向我们的github提交一些文件,这样我们就可以看到一个博客的基本雏形了。

打开终端,输入以下指令:

npm install -g hexo

在电脑上你愿意的一个位置建立一个文件夹,名字任意,然后在该目录下执行以下指令(在终端中输入cd+空格+文件路径就可在该目录下执行指令)

hexo init
npm install

Hexo就会在该文件夹建立博客所需要的所有文件。本地的Hexo博客已经初步搭建起来,输入以下指令:

hexo generate//可以简写为 hexo g
hexo server//可以简写为 hexo s

就可以在浏览器中输入localhost:4000查看本地博客了。(好激动好激动)要注意的是,所有的hexo指令都必须在你所建立的目录下执行。

部署Hexo到Github上

本地的博客已经搭建好了,如何能让别人从网上访问到你的博客?只要将你的本地博客deploy到GitHub上就好。输入以下指令:

npm install hexo-deployer-git --save

然后打开博客目录的_config.yml文件,设置

 deploy:
 
 type: git

 repo: https://github.com/yourname/yourname.github.io.git

 branch: master

(需要在type和repo后面加上一个空格再填写)。

绑定域名(让github page网址跳转到你的自定义域名上)

在你的Hexo目录中找到source文件夹,在其中新建一个文件CNAME,没有后缀名(建议使用Sublime Text新建),内容为你的域名(不加http://www之类的前缀),保存。

一名设计师的github + hexo小白搭建日志_第6张图片
cname示例

输入hexo部署指令:

hexo g
hexo deploy//可简写为 hexo d

激动人心的时刻到啦,在浏览器中输入自己域名,就可以看到自己的博客啦!

hexo博客的使用

发布文章

$ hexo new "My New Post" // 创建一个md文件

创建好文件直接进行编辑,也可以直接用别的软件写markdowm文件,然后放到\Hexo\source_posts

$ hexo server //启动本地服务器,可以预览本地效果

更多关于博客的写作说明最好直接看hexo的网站文档 https://hexo.io/zh-cn/docs/writing.html

$ hexo generate //生成新文章的的网页静态页面
$ hexo deploy //部署到github

我在这一步又遇到了问题 生成静态文件的时候卡住,然后重开终端,直接执行 hexo g,似乎没问题 X_X

部署到github

& hexo d

坑坑坑

部署时遇到的问题:

  1. 报错 “fatal: Not a git repository (or any of the parent directories): .git”
    搜了一下,执行 git init 解决了问题。

  2. ERROR Deployer not found: git
    解决办法:
    确保安装了hexo的 deployer插件

npm install hexo-deployer-git --save 

3.部署成功后github上提示我的 The page build failed with the following error:

The submodule themes/Anisina was not properly initialized with a .gitmodules file. For more information, see https://help.github.com/articles/page-build-failed-missing-submodule.

邮件给github求助,他们告诉我估计是我把一个repo当做submodule放在了另一个git repo里。我一直想不明白这个是什么意思,后来折腾了好几天,各种尝试,重试,分析了很久这个问题。途中因为尝试可能错误的操作都搅在一起显现了,我到现在也没精准排除,不过想来大概两个原因:

1.我试图更换主题,copy别人的theme时,clone错了地址,搬运了整个repo,我其实只需要theme文件夹的主要文件就可以了。
2.我git init时,命令执行错了文件夹,在我hexo的文件下执行,会在我的blog repo下里又生成一个我本身pages的repo的.git的文件,因为我后来重新来过时,打开了finder的隐藏文件的显示,确保我的hexo文档下没有多余的.git

经过几遍的尝试,现在我的域名终于可以正常打开我的hexo博客啦!(虽然还是古老的主题,下一步尝试替换和设置主题,希望不要有更多幺蛾子55555T-T)

总结下当基础配置都没有问题的日常操作流程:
在本地发布文章

  • hexo s预览
  • hexo g生成页面的静态文件
  • hexo d部署到github
  • 然后线上查看

问题参考:
https://xuanwo.org/2014/08/14/hexo-usual-problem/
http://www.jianshu.com/p/465830080ea9/comments/3774706


差不多就是这样一个过程啦!接下来还要继续折腾的就是,对于博客页面的进一步自定义,以及,尽量发点内容上去吧,等能看了再分享成果吧,已死 (:зゝ∠)

你可能感兴趣的:(一名设计师的github + hexo小白搭建日志)