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博客的步骤就结束了。想想还有点小激动呢……