Fork me on GitHub

Github+hexo搭建个人blog过程小记

发表于 | 分类于 | | 热度: ℃
最近自己用github+hexo完成了github博客的搭建，这里记录自己搭建的简单过程。包括一些必要软件的下载，hexo的配置和常用指令，以及遇到的一些问题等等。
标题图片来自豆瓣相册杨羽1994的摄影作品

前期准备

下载

配置github

  • 基本过程为：

    1. 注册github账号。

    2. 创建新仓库，命名为username.github.io格式。如：

      image

      博客搭建成功后可在浏览器用username.github.io（如annjun1224.github.io）访问。

    3. 配置ssh并与本机相关联。
      注：ssh配置过程详见上一篇博文的SSH配置部分：Github简单使用配置总结+SourceTree使用小结

安装配置hexo

hexo简介

  • Hexo 是一个快速、简洁且高效的博客框架，使用 Markdown（或其他渲染引擎）解析文章。

hexo安装

  • 安装完git和node.js之后，在桌面右键-git besh here，输入：

    1
    npm install -g hexo-cli

    查看是否安装成功，输入：

    1
    hexo -v

    出现版本信息，则安装成功。

hexo初始化

  • 选择某个文件夹作为hexo博客的存放位置并在此处初始化博客。
    如：选择目录E:\yangyin\blog。在git bash输入：

    1
    2
    //进入目录
    cd e:yangyin/blog
    1
    2
    //初始化
    hexo init

  • 根据初始化成功提示，执行以下命令，系统可以根据package.json文件中dependencies的配置安装所有依赖包：

    1
    npm install

    生成文件格式大抵如：

    1
    2
    3
    4
    5
    6
    7
    8
        .
    ├── _config.yml
    ├── node_modules
    ├── package.json
    ├── scaffolds
    ├── source
    | └── _posts
    └── themes

  • 到此，基本安装流程结束。
    可以输入以下指令验证：

    1
    2
    3
    4
    //生成静态文件
    hexo g
    //启动hexo服务
    hexo s

    然后在浏览器输入：localhost:4000,查看hexo博客默认主页。

    • [注]此处可能遇到4000端口打不开的问题，查看该端口是否被占用。在cmd命令行输入：

      1
      netstat -ano|find ":4000"

      查看并关闭占用4000端口的进程。（比如福昕阅读器的文档安全防护程序。）

部署到gtihub

  • 进入新建的仓库，获取ssh格式的url：

    image

  • 打开blog下的站点配置文件_config.yml，将url复制到Deployment的repo部分：

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:annjun1224/annjun1224.github.io.git
      branch: master

  • 执行以下命令安装git包:

    1
    npm install hexo-deployer-git --save

  • 最后部署到github上，输入：

    1
    hexo d

    然后在浏览器输入你建立的仓库的名称username.github.io即可访问博客了。

hexo简单使用方式

常用指令

1
2
3
4
5
6
hexo generate (hexo g) //生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) //启动本地web服务，用于博客的预览
hexo deploy (hexo d) //部署博客到远端服务器（github）
hexo new "postName" //新建文章
hexo new page "pageName" //新建页面
hexo clean //清除缓存

如何书写博文

  • 新建一篇博文：

    1
    hexo new "blogName"

    在blog下的source的_posts文件夹下新建了markdown文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
//自己常用的文件头格式
title: 博文名称
date: 2018-03-01 10:34:21 //发表日期
tags: //所属标签
- hexo
- github
categories: //所属分类
- 技术
comments: true //是否开启评论
description: 博文简述
photos: //首页展示的博文图片（可不加）
    - "https://user-images.githubusercontent.com/28525226/36975978-deac72a0-20b6-11e8-830b-ebd272ce4676.jpg"
---
  • 写完博客，hexo g生成静态文件。之后生成的文件会放在./public目录下，这便是我们将要部署到GitHub上的全部内容。
  • hexo s –debug在4000端口查看效果。
  • hexo d推送到github。
  • 在hexo g之前可hexo clean清楚缓存。

选择主题，美化博客