从零开始搭建属于自己的博客

  • 环境： Mac OS X Yosemite
  • 版本： 10.10.5
  • 前言： 综合前辈经验，历经磨砺，终于成功部署了属于自己的博客网站，将其整个思路整理出来，希望对有需要的人有所帮助。由于撰写比较仓促，描述得可能不够仔细，有问题欢迎留言交流！

1. 注册Github，创建Repository

打开网址：https://github.com， 注册属于自己的Github账号，拥有账号后再登录账号进入Repositories中创建一个以自己用户名+”.github.io”创建的repository（仓库），如我的用户名为xiaoyaoyou1212，那么创建的仓库名为xiaoyaoyou1212.github.io，这样我们就有了GitHub默认分配给每个用户的二级域名，如我的GitHub二级域名是http://xiaoyaoyou1212.github.io。
有了这个二级域名后，我们就可以利用GitHub的免费站点部署自己的个人网站，本文准备利用Hexo这个静态框架搭建自己的个人博客，如果你已拥有自己的CSDN博客，那么你可以利用GitHub的免费站点作为中转站进行跳转，具体设置如下：
1、在目录下新建文件夹，clone GitHub中的代码到本地，具体命令如下：git clone https://github.com/xiaoyaoyou1212/xiaoyaoyou1212.github.io.git，这个执行的前提是本地已经安装好git，如果没有安装，可略过先看以下步骤，后面有详细讲解；

2、新建index.html文件，该文件内容如下(为了描述方便，跳转链接是我的CSDN博客，替换为你的CSDN博客地址就行)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <script>
    function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
            window.location.href="http://blog.csdn.net/xiaoyaoyou1212";
        } else {
            window.location.href="http://m.blog.csdn.net/blog/index?username=xiaoyaoyou1212";
        }
    }
    browserRedirect();
    </script>
    <body>
    
    </body>
</html>

3、上传本地文件index.html到GitHub，按顺序执行以下命令，命令如下：

1
2
3
4
git pull //获取GitHub上最新代码，此处因为是第一提交，可以忽略
git add . //添加当前目录下的所有文件到git本地仓库，注意最后的“.”
git commit -m "描述"	//提交本地文件到git本地仓库
git push //push本地文件到GitHub仓库

4、访问你的GitHub提供的二级域名地址，是不是已经成功跳转到你的CSDN博客地址了，就是这么简单

2. 注册域名（可选）

打开阿里云服务的万网网址：https://wanwang.aliyun.com，查询自己想注册的域名是否存在，如果该域名还未被注册，那么恭喜你，你可以用这个名字申请一个.com的顶级域名，首次注册第一年的费用是45元，是不是很便宜，哈哈，就是这么便宜，所以现在的域名满天飞咯，找到一个好记又短的域名非常难了，不过只是自己的个人网站域名长点倒也无所谓啦，像我的域名http://www.xiaoyaoyou1212.com就很长而且还有数字，是不是感觉很不规范，主要还是因为这个账号自己很多地方用到了，还是有点感情的啦！好了，说了这么多，下面正式进入利用Hexo打造专属自己的个人网站。

3. 安装brew

brew又叫Homebrew，是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，只需要一个命令，非常方便，brew类似ubuntu系统下的apt-get的功能；brew的官方网站：http://brew.sh/在官方网站对brew的用法进行了详细的描述；安装方法：在Mac中打开Termal输入如下命令：ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"。

4. 安装Git

由于安装了brew，所以此处很简单啦，只需要执行如下命令就行：brew install git，安装完后使用命令git --version进行验证，如果输出了git的版本号则说明git已经安装成功，可以放心使用了！

5. 安装Node

安装node前，需要先安装npm工具，npm是一个node包管理和分发工具，已经成为了非官方的发布node模块（包）的标准，有了npm，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。
安装npm的命令如下：brew install npm，安装完后可以使用命令npm -v看是否显示版本号来进行验证。
安装node的命令如下：npm install -g node，-g表示全局安装，同样安装完后可以使用命令node -v来进行验证。

6. 安装Hexo

输入命令npm install -g hexo进行安装，安装完后选择一个目录新建文件夹blog，进入blog目录，执行命令hexo init，以后blog这个目录就是整个网站的根目录，以后所有的操作都在该目录下进行。
执行命令hexo generate(或hexo g)生成静态页面，再执行命令hexo server进行服务启动，在浏览器中输入http://localhost:4000就可以访问了，不过别急，这个还只是Hexo默认的风格哦，还需要进行一些个性化设置才符合自己的口味嘛！下面就详细讲解怎么通过一些配置打造个性化的网站风格。

7. 配置Hexo

网上提供了很多支持Hexo的主题，可以按照个人喜爱选择一个，我选择的是yilia，为啥选择这个，就是第一眼感觉最满意就选择了，下面我将依据yilia主题进行配置的讲解。首先进入blog目录，执行命令git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 下载该主题到本地，修改_config.yml中的theme: yilia.以下是yilia的配置文件，由于注释符“#”在markdown中有其他用途，所以都以“//”进行替换进行展示说明，你可以按照注释修改为自己想展示的效果，如果你选择的是其他主题，那么就按照主题作者提供的配置文件进行相关修改，其实都大同小异。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//Header
menu:
  主页: /
  所有文章: /archives
  随笔: /tags/随笔
  相册: /picture
//SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  //zhihu: "#"
  //douban: "#"
  //mail: "#"
  //facebook: "#"
  //google: "#"
  //twitter: "#"
  //linkedin: "#"
rss: /atom.xml
//Content
excerpt_link: more
fancybox: true
mathjax: true
//是否开启动画效果
animate: true
//是否在新窗口打开链接
open_in_new: false
//Miscellaneous
google_analytics: ''
favicon: /favicon.png
//你的头像url
avatar: 
//是否开启分享
share_jia: true
share_addthis: false
//是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key
//若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论
duoshuo: true
//是否开启云标签
tagcloud: true
//是否开启友情链接
//不开启——
//friends: false
//开启——
friends: true
//是否开启“关于我”。
//不开启——
//aboutme: false
//开启——
aboutme: 个人介绍

修改完主题后，可以通过执行命令hexo g进行部署，再通过浏览器输入http://localhost:4000，本地就可以查看该主题的效果了。更多个性化的设置可以参考这篇文章：http://ibruce.info/2013/11/22/hexo-your-blog/?utm_source=tuicool.

8. 部署及发布

前面所讲解的都是依据本地进行访问，如果需要将自己的网站部署到GitHub上，并且能通过自己申请的域名进行访问的话，那么还需要进行一些相关的配置。首先，需要修改_config.yml文件中的deploy属性

1
2
3
4
deploy: 
  type: git
  repo: https://github.com/xiaoyaoyou1212/xiaoyaoyou1212.github.io.git
  branch: master

再执行命令npm install hexo-deployer-git --save；然后需要配置下SSH，步骤如下：

  1. 设置用户名及邮箱

    1
    2
    git config --global user.email "xxx.xxx@xxx.com"
    git config --global user.name "xxx"

  2. 生成密钥

    1
    ssh-keygen -t rsa -C "xxx.xxx@xxx.com"

  3. 找到用户目录下.ssh目录下生成的两个文件id_rsa和id_rsa.pub，用文本编辑器打开ssh.pub文件，拷贝其中的内容，将其添加到GitHub Add SSH Key

  4. 执行命令ssh -T git@github.com进行验证
  5. 执行命令hexo g进行部署，再执行命令hexo d进行发布，发布成功后，在浏览器中输入你Github的二级域名，如：https://xiaoyaoyou1212.github.io就可以看到你发布的网站了，不过如果想通过你申请的一级域名来访问的话还需要在你的blog的source目录下新建CNAME文件，里面输入你的域名地址，再进行部署及发布就行。
    附：
    每次部署的步骤，可按以下三步来进行：
    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

常用命令：

1
2
3
4
5
6
7
hexo new"postName" #新建文章
hexo new page"pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

常用复合命令：

1
2
hexo deploy -g
hexo server -g

简写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

9. 常见问题

  1. ERROR Deployer not found: git 或者 ERROR Deployer not found: github，执行命令npm install hexo-deployer-git --save；
  2. ERROR Process failed: layout/.DS_Store, 那么进入主题里面layout和_partial目录下，执行删除命令rm -rf .DS_Store；
  3. ERROR Plugin load failed: hexo-server，执行命令：sudo npm install hexo-server；
  4. 执行命令hexo server，提示：Usage: hexo ….，执行命令：npm install hexo -server --save，提示：hexo-server@0.1.2 node_modules/hexo-server….，这个时候再执行：hexo server；
  5. 如果输入ssh -T git@github.com出现错误提示：Permission denied (publickey).因为新生成的key不能加入ssh就会导致连接不上github。解决办法如下：先输入ssh-agent，再输入ssh-add ~/.ssh/id_key，这样就可以了；如果还是不行的话，输入ssh-add ~/.ssh/id_key命令后出现报错Could not open a connection to your authentication agent.解决方法是key用Git Gui的ssh工具生成，这样生成的时候key就直接保存在ssh中了，不需要再ssh-add命令加入了，其它的user，token等配置都用命令行来做；最好检查一下在你复制id_rsa.pub文件的内容时有没有产生多余的空格或空行，有些编辑器会帮你添加这些的。

10. 参考链接

  1. http://ibruce.info/2013/11/22/hexo-your-blog/?utm_source=tuicool
  2. http://www.jianshu.com/p/465830080ea9
  3. http://blog.csdn.net/lmj623565791/article/details/51319147

本文标题:从零开始搭建属于自己的博客

文章作者:胡伟

发布时间:2016年05月29日 - 20时15分

最后更新:2016年06月06日 - 23时37分

原始链接:http://www.xiaoyaoyou1212.com/2016/05/29/从零开始搭建属于自己的博客/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 1. 注册Github，创建Repository
  2. 2. 2. 注册域名（可选）
  3. 3. 3. 安装brew
  4. 4. 4. 安装Git
  5. 5. 5. 安装Node
  6. 6. 6. 安装Hexo
  7. 7. 7. 配置Hexo
  8. 8. 8. 部署及发布
  9. 9. 9. 常见问题
  10. 10. 10. 参考链接
,