Hexo和GitHub搭建个人博客

简介

Hexo是一款静态博客框架。基于Node.js,超快速度;支持 Markdown语法;可一键部署到 GitHub Pages, Heroku 或其他网站;拥有强大丰富的插件系统。官网链接:Hexo
Mac用户参考:传送门

安装前提

  • Git。Hexo基于Git封装命令,用于把本地的Hexo文件提交到GitHub Pages。
  • Node.js。Hexo调用Node来生成静态页面。自定义环境配置可参考:Node.js环境变量配置
  • GitHub。作为做博客的远程仓库、域名和服务器。

安装Hexo

官方Docs
首先创建一个文件夹,如blog,用户存放Hexo的配置文件,然后进入blog里安装Hexo。打开Dos窗口执行下面命令

  1. npm install -g hexo-cli:安装Hexo。如果没有对Node.js进行自定义环境变量配置,会默认安装在C:\Users\用户名\AppData\Roaming\npm目录下
  2. hexo init <folder>:生成初始化文件。Hexo 将会在指定文件夹中新建所需要的文件,不指定<folder>会在当前目录执行。
    新建完成后,blog目录会产生文件,结构如下:
.
├── _config.yml  (配置文件)
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts  (文章放置处)
└── themes  (主题放置处)
  1. hexo generatehexo g:Hexo读取初始化配置文件_config.yml,在blog根目录下建立一个public文件夹生成静态博客内容。
  2. hexo server:启动本地Hexo服务。然后浏览器输入http://localhost:4000即可看到默认主题Demo。
homePage

如果你不能看到这个页面,说明环境还没配置好,不用紧张。

配置GitHub

  1. 建立Repository。建立与你用户名对应的仓库,仓库名必须为【username.github.io】,固定写法。
  2. 打开_config.yml文件,到最下面修改deploy属性,把用户名换成你个人的username。
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

3.0版本后都是这样配置,我的Hexo版本是3.3.8,hexo -vsersion可查看。

  1. npm install hexo-deployer-git --save:安装连接Hexo和Git的管道插件
  2. hexo deploy:把本地public目录里文件部署到远程GitHub对应的仓库里。如果你没有使用SSH keys,在部署过程会弹出可视化窗口输入账号密码。浏览器中输入仓库名称https://username.github.io/,可看到默认主题Demo。

主题推荐

我个人使用next主题,配置性很强,next主题说明文档

主题下载配置

使用Git下载到本地,先确认当前目录是blog根目录,执行git clone https://github.com/iissnan/hexo-theme-next themes/next,后面两个参数分别是主题GitHub地址和本地themes目录放置的文件夹。

对比_config.yml配置文件中元素theme: landscape与themes目录中landscape文件夹名相同,下载主题后会生成对应的文件夹,我的是next。

把_config.yml配置文件中元素修改为theme: next即可。

每次更换主题部署时,分别执行三个命令:

hexo clean  # 清理public文件夹
hexo generate  #生成静态文件
hexo deploy  #本地部署到远程服务器

再次打开地址发现主题风格变化了。最后执行hexo new <title>创建一篇新文章,打开source/_posts/title.md文件,通过MarkDown格式语法开心的编辑文章吧。
如果你有什么问题,可以评论或私信我,欢迎叨扰。

参考链接http://leopardpan.github.io

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容