基于Github和Hexo的个人博客搭建

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 1.8k 阅读时长 ≈ 2 分钟

写在前面

  去年起看了很多大牛的博客，也萌生了搭建个人博客的想法，为什么搭建博客，总结下来有以下好处：

  • 书写是为了更好的思考
  • 激励自己持续学习
  • 尝试持之以恒的去做一些事情

  这次趁着大论文盲审结果还没出来和导师还没反馈小论文修改意见的间隙，花了一个周末的时间搭建好了自己的个人博客。在此将搭建过程作为自己的第一篇博客记录下来。

Hexo简介

enter image description here
  Hexo 是一个基于 Node.js 的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。Hexo有着丰富的主题，可以定制多种样式。
hexo特性：

  • 速度快：Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成；
  • 撰写工具丰富：支持GitHub Flavored Markdown和所有Octopress的插件；
  • 扩展性强： Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less。

  使用hexo时，有以下常用命令：

1
2
3
4
5
6
7
8
9
10
npm install hexo -g #安装
npm install hexo -g #安装  
npm update hexo -g #升级  
hexo init #初始化
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署
hexo new 创建文章

环境搭建(node,hexo,git)

  前面说过hexo是基于node.js，因此需要先安装node.js。git的配置这里就不再赘述，可以参考廖雪峰老师的Git教程。安装好Git后，需要将其与自己的GitHub账号关联上。安装好node.js后，仅需一步即可安装hexo的相关套件。在命令行输入:

npm install hexo -g hexo-cli

  到这一步就安装好了所需的所用环境。

设置

  在搭建自己的博客前，需要设置一个博客的根目录。使用命令行切换到该根目录下，输入：

hexo init blog

  等待片刻，成功后会提示INFO Start blogging with Hexo!初始化成功后，目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

  source的_posts目录下会自带一篇题为“Hello World”的示例文章，直接执行以下操作可以看到网站初步的模样:

$ hexo generate
# 启动本地服务器
$ hexo server
# 在浏览器输入 http://localhost:4000/就可以看见网页和模板了,若端口号被占用，可输入hexo server -p 4001改为其他端口号。

  访问http://localhost:4000/，界面如下：
enter image description here

部署及配置博客

配置SSH

  在上一步看到了网站的默认效果，此时需要将该博客部署到Github上，登陆Github，创建名为your_name.github.io(your_name替换成你的用户名)的仓库。重新打开CMD,输入：

ssh-keygen -t rsa -C "Github的注册邮箱地址"

  一路Enter，得到信息：Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.根据保存的路径找到id_rsa.pub文件，用编辑器打开，复制所有内容，然后Sign in to GitHub，按以下步骤配置SSH：
  New SSH key ——>Title：blog ——> Key：输入刚才复制的—— >Add SSH key

配置博客

  在blog目录下，用编辑器打开_config.yml，修改其中的配置信息。
  修改网站中的相关信息 ：

1
2
3
4
5
6
7
title: #标题
subtitle: #副标题
description: #站点描述
author: #作者
language: zh-Hans
email:  #电子邮箱
timezone: Asia/Shanghai

  配置部署仓库

1
2
3
4
deploy: 
  type: git
  repo: 刚刚github创库地址.git
  branch: master

  特别提醒，在每个参数的：后都要加一个空格。以上操作完成后，执行：

1
2
3
4
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo generate #生成
hexo server #启动服务预览，非必要，可本地浏览网页
hexo deploy #部署发布

  得到提示信息INFO Deploy done: git表示成功发布到Github上。然后在浏览器里输入your_name.github.io就可以访问刚刚配置好的博客了。

后记

  到此为止，最基本的hexo+github搭建博客完结。hexo有许多优美简洁的主题，网上也有许多关于主题美化的教程，可以根据自己的喜好添加各种或实用或酷炫的功能。

欢迎关注我的公众号

enter description here

-------------本文结束感谢您的阅读-------------