Hexo+GitHub生成个人博客

你喜欢吃青椒么
370 阅读4分钟

前言

本篇文章记录一下我生成个人博客的过程。顺便分享给有需要的人。

如果您需要开发个人博客，需要：

  • 最基础的前端知识就行。
  • 用markdown的语法来写文章。
  • 有GitHub账号。
  • 安装好了Git和node
  • 知道npm操作。

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

hexo 正常来说，不需要部署到我们的服务器上，我们的服务器上保存的，其实是基于在hexo通过markdown编写的文章，然后hexo帮我们生成静态的html页面，然后，将生成的html上传到我们的服务器（或者是GitHub上）。简而言之：hexo是个静态页面生成、上传的工具。

安装Hexo

$ npm install hexo-cli -g //全局安装hexo
$ hexo init blog //对blog文件夹初始化(这一步会很慢)
$ npm install //安装所需要的组件
$ hexo g //编译生成静态页面
$ hexo s //启动本地服务

启动本地服务之后，根据终端的提示打开http://localhost:4000/可以在本地查看到博客。如下图所示。

绑定GitHub

上一步在本地查看到了博客，如果别人想通过在浏览器输入地址来访问你的博客怎么办？

让你的Hexo与GitHub仓库绑定。这样别人就可以访问了。

获取本机SSH口令

ssh keys就是用来使本地git 项目与github联系。

  • 提交过代码到GitHub上的同学代表着已经让git仓库绑定到了GitHub上了。就不必再配置SSH 口令了。

  • 如果没有绑定的话。

    • $ ssh-keygen -t rsa -C "邮件地址@youremail.com" //ssh-keygen -t rsa -C "Github的注册邮箱地址"
    • 提示Enter passphrase (empty for no passphrase):设置密码
    • Enter same passphrase again 再次输入
    • Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.代表设置成功。
    • 找到id_rsa.pub文件，复制里面所有内容。
    • 来到GitHub主页面，路径为Settings/SSH and GPG keys/New SSH key。
    • Title: blog //不一定非要是blog
    • key: 复制的内容
    • Add SSH key 完成SSH key 的绑定。

  • 最后还要这一步。

$git config --global user.name "你的名字"
$git config --global user.email "你的邮箱"

Git还不清楚的同学可以戳Git笔记

创建新仓库

  • 平时我们创建仓库会直接写你要创建的仓库名就OK。比如建一个Node的仓库直接填Node就行了。 但是，博客的仓库地址不一样，必须为你的GitHub名+ github.io 。比如我的博客仓库名就叫做zhongjunhaoz.github.io。必须按照此种格式去填写。

blog文件的基本配置

  • 配置_config.yml文件。
title: **My Blog** #博客名
subtitle: to be continued... #副标题
description: My blog #给搜索引擎看的，对网站的描述，可以自定义
author: **Yourname** #作者，在博客底部可以看到
email: yourname@yourmail.com #你的联系邮箱
language: **zh-CN** #中文。如果不填则默认英文
timezone: Asia/Shanghai
# URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
# Writing 文章布局、写作格式的定义，不修改
# Archives 默认值为2，这里都修改为1，相应页面就只会列出标题，而非全文
# Server 不修改
# Date / Time format 日期格式，可以修改成自己喜欢的格式
# Pagination 每页显示文章数，可以自定义，贴主设置的是10
  • 配置_config.yml文件下的Deploy
deploy:
  type: git
  repository: 你的仓库地址
  name: GitHub名
  email: 邮箱
  branch: master
  • 安装插件 npm install hexo-deployer-git --save
  • 准备上传到github仓库。
- hexo clean //清除之前的缓存
- hexo g  // 生成静态文件
- hexo d  //上传至仓库
  • 接着在浏览器输入你的GitHub名+ github.io就可以访问你的个人博客了。
  • zhongjunhaoz.github.io/ 这是我的个人博客。

配置主题

原生的博客主题有点丑，我们可以选择自己喜欢的主题添加到自己的博客中。

  • 官方主题库：主题
  • 在这里我选择的是：闪烁之狐。里面有对更改主题配置的文档。

常用命令

首次安装可能需要

npm install hexo -g #全局安装 
npm update hexo -g #升级 
hexo init #初始化

写博客最常用

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成静态Html
hexo s == hexo server #会监视文件变动并自动更新，您无须重启服务器
hexo d == hexo deploy #部署

服务器

hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo server -s #静态模式
hexo clean #清除缓存 网页正常情况下可以忽略此条命令

监视文件变动

hexo generate --watch  #监视文件变动

草稿

hexo publish [layout] <title>

网站效果

欢迎访问我的博客，会分享一些技术文章，一起学习前端。

参考文章

hexo常用命令笔记

avatar
文章
阅读
粉丝