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

一、Git的下载与安装

下载链接:https://git-scm.com/downloads

下载教程:Github——git本地仓库建立与远程连接(只看下载安装部分即可)

在任意地方右键出现红框两条:
在这里插入图片描述
Git Bash Here:
git version可查看安装好的版本:
在这里插入图片描述

二、Nodejs安装

node.js安装地址
在这里插入图片描述
Git Bash Here:
node -v可查看安装好的版本:在这里插入图片描述

三、安装Hexo

在电脑的任意位置打开Git Bash Here:
npm install -g hexo即可安装Hexo

tip:因为网络连接问题,可能会失败,可以多试几次

四、初始化Hexo

4.1 hexo init

创建一个文件夹myBlog(名称随意),在myBlog目录下打开Git Bash Here,输入hexo init,出现以下文件则init完成。

耐心等待init,时间有一点点长…………
在这里插入图片描述
在这里插入图片描述
新建完成后,指定文件夹的目录如下:

├── _config.yml # 网站的配置信息,您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹,除 _posts 文件,其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主题文件夹

4.2 配置_config.yml

打开_config.yml,修改博客名称、作者,主题可不修改
在这里插入图片描述

4.3 hexo s运行

hexo s开启本地预览服务,s 是 server 的缩写
在这里插入图片描述
浏览器输入http://localhost:4000即可打开网页预览,这个为默认主题:
ctrl+c停止服务器
在这里插入图片描述

4.4 下载更多主题:

浏览更多thems

  1. 下载主题hexo-theme-hipaper:git clone https://github.com/iTimeTraveler/hexo-theme-hipaper.git themes/hipaper(其他主题同理,详细下载参考主题的使用文档)
    在这里插入图片描述下载后,可以在themes文件包里看到下载的主题:
    在这里插入图片描述
  2. 修改_config.yml中的theme: landscape改为theme: hipaper
    在这里插入图片描述
  3. 执行hexo g来重新生成,再用hexo s运行即可看到更换成功

在这里插入图片描述


tip:如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发布。


五、部署到Github上

5.1 创建仓库

注册GIthub账号,Your repositories -> New
在这里插入图片描述
仓库名:username.github.io
username就是Owner,一定要相同!
一定要勾选 Add a README file
在这里插入图片描述
这时浏览器输入https://username.github.io即可进入默认的个人主页
在这里插入图片描述

5.2 github测试

打开这个仓库,Add file
在这里插入图片描述
新建一个index.html文件,内容’hello’
在这里插入图片描述
下拉,commit new file
在这里插入图片描述
可以看到此时仓库已有文件index.html
在这里插入图片描述

再次打开个人博客网址,可看见显示’hello’

在这里插入图片描述

5.3 配置_config.yml文件

需要特别注意的地方是,冒号后面必须有一个空格,否则可能会出问题。

拉到文件末尾,填上如下配置:

deploy:
   type: git
   repository: https://github.com/MuYunyun/MuYunyun.github.io.git   #仓库地址
   branch: master

在这里插入图片描述

5.4 安装hexo-deployer-git自动部署发布工具

在/myBlog下Git Bash Here:
npm install hexo-deployer-git --save
在这里插入图片描述

5.5 发布到Github

hexo clean && hexo g && hexo d清除并上传

hexo d -g
表示上传成功:

六、添加博客

6.1 CSDN博客导出到Hexo博客

首先进入csdn博客编辑界面,然后选择右侧的导出为markdown文件,

将文件复制到hexo文件路径下的source文件夹里边,我的为这里:

然后再打开Git Bash Here,输入命令hexo d -g

6.2 自己新建md文件

一般md文件完整格式如下:

---
title: postName #文章页面上的显示名称,一般是中文
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---
这里是正文

6.3 如何让博文列表不显示全部内容

默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?

在合适的位置加上<!--more-->即可,例如:

# 前言

使用github pages服务搭建博客的好处有:

1. 全是静态文件,访问速度快;
2. 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
3. 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;

<!--more-->

4. 数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
5. 博客内容可以轻松打包、转移、发布到其它平台;
6. 等等;
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐