适合人群

  • 喜欢写Blog的人
  • 有一定的编程基础
  • 爱折腾的人
  • 熟练使用版本控制Git
  • 了解使用Github
  • 熟悉基本的MarkDown语法

环境准备

安装Git

下载 msysgit 并执行即可完成安装。

安装Node.js

在 Windows 环境下安装 Node.js 非常简单,仅须下载安装文件并执行即可完成安装。

安装hexo

利用 npm 命令即可安装。(在任意位置点击鼠标右键,选择Git bash)

npm install -g hexo

问题

  • npm ERR! registry error parsing json 错误

可能需要设置npm代理,执行命令

npm config set registry http://registry.cnpmjs.org
  • hexo:command not found
    删除刚刚安装的npm目录,重新执行命令npm install -g hexo安装hexo,

创建hexo文件夹

安装完成后,在你喜爱的文件夹下(如H:\hexo),执行以下指令(在H:\hexo内点击鼠标右键,选择Git bash),Hexo 即会自动在目标文件夹建立网站所需要的所有文件。

hexo init

安装依赖包

npm install

本地查看

现在我们已经搭建起本地的hexo博客了,执行以下命令(在H:\hexo),然后到浏览器输入localhost:4000看看。

hexo generate
hexo server

好了,至此,本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Github。

问题

  • 执行hexo server提示找不到该指令
    解决办法:
    在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:
npm install hexo -server --save

安装此server后再试,问题解决

github 创建博客

注册账号

地址:https://github.com/
输入账号、邮箱、密码,然后点击注册按钮.

创建页面仓库

这个仓库的名字需要和你的账号对应,格式: yourname.github.io
输入基本信息,然后点击创建仓库.


注意
命名规则:你的github账号.github.io,我这里被坑了,之前是jekell写的,现在换成hexo,所以我是另建创库了。

生成SSH密钥

ssh-keygen -t rsa -C “你的邮箱地址”,按3个回车,密码为空。

在C:\Users\Administrator.ssh下,得到两个文件id_rsa和id_rsa.pub。

在GitHub上添加SSH密钥

打开id_rsa.pub,复制全文。https://github.com/settings/ssh ,Add SSH key,粘贴进去。

hexo使用

目录结构

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

全局配置 _config.yml

# Hexo Configuration
# Docs: http://hexo.io/docs/configuration.html
# Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述,给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮enable: true #是否启用line_number: true #显示行号tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:type: gitrepo: 刚刚github创库地址.gitbranch: master

注意

  • 配置文件的冒号“:”后面有一个空格
  • repo: 刚刚github创库地址.git

hexo命令行使用

常用命令:

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

简写:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

编辑文章

新建文章

hexo new "标题"

在 _posts 目录下会生成文件标题.md

title: Hello World
date: 2015-07-30 07:56:29 #发表日期,一般不改动
categories: hexo #文章文类
tags: [hexo,github] #文章标签,多于一项时用这种格式
---
正文,使用Markdown语法书写

编辑完后保存,hexo server 预览

hexo部署

执行下列指令即可完成部署。

hexo generate
hexo deploy

hexo deploy问题:Deployer not found: git
执行

npm install hexo-deployer-git --save

重新deploy即可

以下提示说明部署成功

[info] Deploy done: git

点击 Github 上项目的 Settings,GitHub Pages,提示Your site is published at http://wuxiaolong.me (这是我买的域名)

图床

注意:七牛现在使用自己的域名,不然用不了,不再推荐使用,2018/10/28。

1.墙裂推荐七牛云储存,注册地址。

2.七牛云储存提供10G的免费空间,以及每月10G的流量.存放个人博客图片最好不过了

3.七牛云储存还有各种图形处理功能、缩略图、视频存放速度也给力(非打广告)。

具体使用见使用七牛作为github博客的图床

域名

将独立域名与GitHub Pages的空间绑定

方法一:在站点source目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如wuxiaolong.me
方法二:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如wuxiaolong.me

DNS设置

用DNSpod,快,免费,稳定。
注册DNSpod,添加域名,如下图设置。

其中A的两条记录指向的ip地址是github Pages的提供的ip
如何知道你的github上项目的IP,如下:

去Godaddy修改DNS地址

更改godaddy的Nameservers为DNSpod的NameServers。

微信公众号


欢迎微信扫一扫关注我的公众号。

插件

2016.08.20更新

安装插件

安装插件:npm install 插件名 –save
卸载插件:npm uninstall 插件名
更新插件和博客框架:npm update

执行以下命令安装 RSS 插件

npm install hexo-generator-feed --save

生成站点地图

npm install hexo-generator-sitemap --save

生成百度站点地图

npm install hexo-generator-baidu-sitemap --save

SEO优化

npm install hexo-generator-seo-friendly-sitemap --save

HTML压缩

npm install hexo-html-minifier --save

CSS压缩

npm install hexo-clean-css --save

JS压缩

npm install hexo-uglify --save

imagages压缩

npm install hexo-imagemin --save

插件开启配置

根目录下的 _config.yml,添加以下代码:

# RSS
feed:
type: atom
path: atom.xml
limit: 20# sitemap
# 提交给谷歌搜素引擎,SEO优化开启配置是一样的
sitemap:path: sitemap.xml
# 提交百度搜索引擎
baidusitemap:path: baidusitemap.xml # HTML压缩
html_minifier:exclude:
# css压缩
clean_css:exclude: - '*.min.css'
# js压缩
uglify:mangle: trueoutput:compress:exclude: - '*.min.js'
# image压缩
imagemin:enable     : trueinterlaced : falsemultipass  : falseoptimizationLevel: 2pngquant   : falseprogressive: false

package.json可以看安装了哪些插件。

Hexo Seo优化让你的博客在google搜索排名第一

总结

之前用的jekell写的,手把手教你建github技术博客by jekyll,也是折腾了几天才做成自己满意的,昨天决定换成hexo,也是花了一天半时间,为了追求更好,必须折腾!

关于作者

点击查看

参考文献

  • hexo系列教程:(一)hexo介绍
  • 使用Hexo搭建博客
  • 如何搭建一个独立博客——简明Github Pages与Hexo教程
  • windows下搭建hexo博客并将其部署到GitCafe终极教程
  • GoDaddy优惠码
  • Godaddy购买域名及配置
  • GitHub配置域名(Godaddy)
  • hexo你的博客
  • hexo官网

手把手教你建github技术博客by hexo相关推荐

  1. 手把手教你建github技术博客

    适合人群 喜欢写Blog的人 有一定的编程基础 爱折腾的人 熟练使用版本控制Git 了解使用Github 熟悉基本的MarkDown语法 环境准备 安装Git 下载 msysgit 并执行即可完成安装 ...

  2. 手把手教你搭建个人技术博客,半小时搞定

    一.写在前面 我是猿人,一个热爱技术.热爱编程的IT猿.技术是开源的,知识是共享的! 写作是对自己学习的总结和记录,如果您对Java.分布式.微服务.中间件.Spring Boot.Spring Cl ...

  3. 【Github】hexo结合Butterfly主题从零开始建github.io博客(待配置butterfly主题,暂停

    从零开始建github.io博客 前言

  4. 【如何把CSDN博客转为PDF?】手把手教你如何将CSDN博客以正确格式输出为PDF或打印

    题目 手把手教你如何将CSDN博客以正确格式输出为PDF或打印 以下是本篇文章正文内容,欢迎朋友们进行指正,一起探讨,共同进步.--来自考研路上的lwj.QQ:2394799692 一.使用谷歌浏览器 ...

  5. 写博客原来对程序员这么有用!手把手教你应该如何写博客

    写博客的好处 面试加分 最重要 的一点放在第一位,写优质的博客可以让面试官看到你的学习过程,包括你对知识的掌握,和总结能力.现在社会上太多从培训班出来的人,很多面试管都不喜欢这一类"走捷径& ...

  6. 手把手教你从零开始搭建个人博客,20分钟上手

    一.前言 大家好,最近一直在研究个人博客搭建,目前正在进行的有Django个人博客搭建系列,最近了解到还有很多现成的博客搭建框架,准备后面依次给大家分享下. 本文是基于Hexo框架来构建个人博客的,整 ...

  7. 创建GitHub技术博客全攻略

    说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字. 本文中假设用户名为 tiemaocsdn 1. 注册账号: 地址: ...

  8. 创建GitHub技术博客全攻略【转】

    本文转载自:http://blog.csdn.net/renfufei/article/details/37725057/ 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比 ...

  9. 手把手教你快速搭建个人博客 Hexo + Github

    平时学习查找资料发现了很多个人博客,搭建的很不错,一直想抽空自己也动手实践一下,正好趁着新型冠状肺炎这段宅在家的空,赶紧搭建一下自己的个人博客 先来预览一下博主的个人博客:Fly's Blog 动手能 ...

最新文章

  1. 创新的缩略图展示javascript类库 - Kort.js
  2. Codeforces Round #740 (Div. 2) F. Top-Notch Insertions 线段树 / 平衡树 + 组合数学
  3. 手把手教你用ECharts画柱状图
  4. ffmpeg 封面提取
  5. Python学习 资料[转]
  6. 《Python 快速入门》C站最全Python标准库总结
  7. mysql拼接字符串
  8. 记赖世雄英语笔记和心得
  9. 什么是搜索引擎?有什么作用?
  10. c语言ab43错误的是,ab测试大并发错误
  11. Android音视频点/直播模块开发
  12. 《非暴力沟通》---第二章(是什么蒙蔽了爱?)读书笔记
  13. App架构师实践指南四之性能优化一
  14. 解决IE不能上网,火狐能上网 谷歌和IE浏览器都上不了网只能火狐上怎么办?
  15. 31岁零基础转型开发,目前35岁,说说我转行的辛酸史
  16. mongoDB数据库的安装与配置
  17. Maven 的下载安装和配置
  18. 请求路径上带有或出现jsessionid的处理办法
  19. 解决gazebo [gazebo_gui-3] process has died和[Err] [REST.cc:205] Error in REST request错误
  20. 【Games101 作业6 + 附加题】渲染兔子 BVH SAH 代码

热门文章

  1. 交通拥堵、安全隐患、能源浪费…数字孪生技术助力城市管理现代化
  2. [RK3288][Android6.0] DVP接口摄像头OV5640添加
  3. 光伏产业促进中部省份崛起
  4. tightvnc java viewer_如何使用TightVNC Java Viewer从Web浏览器访问远程VNC桌面
  5. vb计算机运算符号优先级,vb运算符的运算顺序是什么
  6. Android调用相机时找不到android.support.v4.content.FileProvider unresolved package 'content'
  7. 【个人话唠】兴趣让我们走到了一起
  8. 现代版------巴士情缘[常坐公车的兄弟得去看看啦]
  9. HTTP标准状态码及非官方拓展码大全
  10. php类似微信聊天框,仿微信UI界面的PHP+Swoole多人聊天室 TP6框架