Hexo搭建个人博客

工作
阅读次数：次

做前端也有一段时间了，身为一个有(ai)追(zhuang)求(X)前端，怎么能没有自己的个人博客呢^_^
有想法就去做，所以最近用Hexo在github上搭建一个自己的开源博客，终于有了自己的博客了，也希望自己以后能坚持写文！！！
搭建过程中也遇到一些问题，接下来，我将遇到的问题记录下来作为第一篇博客，希望能帮到有需要的人。

准备工作

  • 安装Node.js
    到Node.js官网下载相应系统的最新版本，一路安装即可。
  • 安装git
    根据不同系统安装相应的 git 环境。Mac、Linux系统不多说，Windows一般安装msysgit。
  • 安装Hexo
    使用npm install hexo-cli -g命令安装 Hexo 到全局，然后输入命令hexo -v，输出hexo的版本号即为安装成功。

  • github准备

    • 博客是在 github 上托管维护的，所以当然需要一个github账号。然后在账号下创建一个名为your-name.github.io的仓库。(your-name为你的账号名，比如我的账号名为mrsunny123，那仓库名为mrsunny123.github.io；下文同理)

    • 接下来打开Git Bash，输入配置信息：

      1
      2
      3
      git config --global user.name "You Name"
      git config --global user.email yourmail@server.com
      ssh-keygen -C 'yourmail@server.com' -t rsa      //生成ssh秘钥

    • 接着在C:User你的windows用户名.ssh 下找到 id_rsa.pub 文件；

    • 打开github个人首页，点击settings -> SSH and GPG keys -> New SSH key；title 可以随便取名字，Key 里面添加的内容为 id_rsa.pub 文件内所有的代码。然后点击Add SSH key即可。
    • 使用SSH -v git@github.com命令检测 Git 与 GitHub 是否连接成功。

本地部署Hexo

  • 在某个地方新建一个项目文件夹（比如Blog），然后进入Blog目录，输入hexo init命令进行初始化；
  • 初始化完成后，然后输入hexo generate(g)命令将文章编译为静态页面；
  • 把文章变成页面后，输入hexo server(s)命令启动本地服务，在浏览器中输入http://localhost:4000/查看生成的页面效果。

更换主题

Hexo自己默认的主题是landscape，如果你满足与它，可以跳过这个步骤，直接进行下一步。我觉得默认主题不好看，所以换成了yilia主题，这个主题在移动端的显示也很不错。

  • clone 主题代码
    在目录下执行下面命令clone主题代码：

    1
    $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

  • 修改Blog/_config.yml文件：

    1
    theme: yilia    //默认为landscape

  • 修改themes/yilia/_config.yml文件：

    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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    # Header
    menu:
      主页: /
      所有文章: /archives
      #随笔: /categories
    # SubNav
    subnav:
      github: "https://github.com/MrSunny123"
      weibo: "http://weibo.com/u/5896702219"
      mail: "mailto:zhangxy_92@outlook.com"
      rss: "/atom.xml"
      #douban: "#"
      #zhihu: "#"
      #facebook: "#"
      #google: "#"
      #twitter: "#"
      #linkedin: "#"
    rss: /atom.xml
    # 是否需要修改 root 路径
    # 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
    # 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
    root: 
    # Content
    excerpt_link: 阅读全文
    fancybox: true
    mathjax: true
    # 是否开启动画效果
    animate: true
    # 是否在新窗口打开链接
    open_in_new: false
    # Miscellaneous
    google_analytics: ''
    favicon: /favicon.png
    #你的头像url
    avatar: /img/head.jpg
    #是否开启分享
    share_jia: true
    share_addthis: true
    #是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key
    #若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论
    duoshuo: "sunny-blog"
    #是否开启云标签
    tagcloud: true
    #是否开启友情链接
    #不开启——
    friends: false
    #开启——
    #friends:
      #奥巴马的博客: http://localhost:4000/
    #是否开启“关于我”。
    #不开启——
    #aboutme: false
    #开启——
    aboutme: 程序猿一枚，目前专注WEB前端开发......

温馨提示：修改的时候，每个冒号后面都需要留一个英文空格，不然会出现报错！

  • 查看效果
    更改主题之后使用命令hexo server(s)打开本地服务，查看效果。

部署到github

上面所有的操作完成之后，你就可以将你的Blog项目部署到github上了。

  • 部署之前先修改Blog/_config.yml文件。

    1
    2
    3
    4
    deploy:
        type: git
        repository: https://github.com/MrSunny123/MrSunny123.github.io.git  //MrSunny123替换为你自己的用户名(下文同理)
        branch: master

  • 然后使用如下命令部署：

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

部署成功后，你在浏览器中输入mrsunny123.github.io，就能看到和本地一样的效果了。

写文章

博客搭建完成后，就是写文和维护了，更新和维护其实很简单，每次只要依次执行如下命令：

1
2
3
4
5
$ hexo new(n) xxx    //创建新文章
$ hexo clean     //清除缓存
$ hexo generate(g)    //文章写完后执行，把文章生成页面
$ hexo server(s)    //启动本地服务调试
$ hexo deploy(d)    //部署到github

Hexo支持Markdown写文章，所以只有关心内容，不用担心排版，用起来还是很不错的^_^

最后

博客还不是很完善，后期还会做一些修改，其实已经添加了一些东西了，比如：添加总站访问量和文章阅读量。
如果大家有什么问题，欢迎留言，我会把我知道的告诉大家。
好了，到这里利用Hexo搭建github博客的步骤就结束了。想想还有点小激动呢……