快速使用HEXO搭建个人博客 韩俊强的博客

  经过各种找资料,踩过各种坑,终于使用 hexo 搭建个人博客初步完成了,域名目前用得时 github 的,我的 hexo 是 3.1.1 版本,hexo 不同的版本,很多配置都不一样。好吧,废话不多说了,开始吧。

正文:

 这边教程是针对与Mac的,参考链接,由于原文讲到的hexo是以前的老版本,所以现在的版本配置的时候会有些改动。

 之前是想着写博客,一方面是给自己做笔记,可以提升自己的写作、总结能力,一个技术点我们会使用,并不难,但是要做到让让别人也能听懂我们讲得,还是需要一定的技巧和经验的。很多类似于CSDN、博客园也都可以写文章,但是页面的样式我,不是太喜欢,简书还算好点得。最近看到一些大神们的博客(在我的友情链接里有),貌似都是用hexo写得,我也依葫芦画瓢的搭建了一个。不罗嗦了,直接上搭建步骤。

配置环境

安装Node(必须)

作用:用来生成静态页面的
到Node.js官网下载相应平台的最新版本,一路安装即可。

安装Git(必须)

作用:把本地的hexo内容提交到github上去.
安装Xcode就自带有Git,我就不多说了。

申请GitHub(必须)

作用:是用来做博客的远程创库、域名、服务器之类的,怎么与本地hexo建立连接等下讲。
github账号我也不再啰嗦了,没有的话直接申请就行了,跟一般的注册账号差不多,SSH Keys,看你自己了,可以不配制,不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码,配置了就不需要了,怎么配置我就不多说了,网上有很多教程。

正式安装HEXO 

Node和Git都安装好后,可执行如下命令安装hexo:

$ sudo npm install -g hexo

初始化

创建一个文件夹,如:Blog,cd到Blog里执行hexo init的。命令:

hexo init

好啦,至此,全部安装工作已经完成!

生成静态页面

继续再Blog目录下执行如下命令,生成静态页面

hexo generate (hexo g  也可以)

本地启动

启动本地服务,进行文章预览调试,命令:

hexo server

浏览器输入http://localhost:4000
我不知道你们能不能,反正我不能,因为我还有环境没配置好

常见的HEXO配置错误:

ERROR Plugin load failed: hexo-server

原因: Besides, utilities are separated into a standalone module. hexo.util is not reachable anymore.

解决方法,执行命令:$ sudo npm install hexo-server
执行命令hexo server,提示:Usage: hexo<Command> ....

原因:我认为是没有生成本地服务

解决方法,执行命令:$ npm install hexo-server --save

提示:hexo-server@0.1.2 node_modules/hexo-server
.... 

表示成功了[参考](https://hexo.io/zh-cn/docs/server.html)

这个时候再执行:$ hexo-server

得到: INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

这个时候再点击http://0.0.0.0:4000,正常情况下应该是最原始的画面,但是我看到的是:
白板和Cannot GET / 几个字
原因: 由于2.6以后就更新了,我们需要手动配置些东西,我们需要输入下面三行命令:

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

这个时候再重新生成静态文件,命令:

hexo generate (或hexo g)

启动本地服务器:

hexo server (或hexo s)

再点击网址http://0.0.0.0:4000 OK终于可以看到属于你自己的blog啦,?,虽然很简陋,但好歹有了一个属于自己的小窝了。参考链接,本地已经简单的设置好了,但是现在域名和服务器都是基于自己的电脑,接下来需要跟github进行关联。

配置Github

建立Repository

建立与你用户名对应的仓库,仓库名必须为【your_user_name.github.io】,固定写法
然后建立关联,我的Blog在本地/Users/xiaohange/Blog,Blog是我之前建的东西也全在这里面,有:

Blog
 |
 |-- _config.yml
 |-- node_modules
 |-- public
 |-- source
 |-- db.json
 |-- package.json
 |-- scaffolds
 |-- themes      
   

现在我们需要_config.yml文件,来建立关联,命令:

vim _config.yml

翻到最下面,改成我这样子的,注意: : 后面要有空格

deploy:
  type: git
  repository: https://github.com/xiaohange/xiaohange.github.io.git
  branch: master

执行如下命令才能使用git部署

npm install hexo-deployer-git --save

网上会有很多说法,有的type是github, 还有repository 最后面的后缀也不一样,是github.com.git,我也踩了很多坑,我现在的版本是hexo: 3.1.1,执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。
忘了说了,我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了,总共就两种协议,相信你懂的。
然后,执行配置命令:

hexo deploy

 然后再浏览器中输入http://xiaohange.github.io/就行了,我的 github 的账户叫 xiaohange

,把这个改成你 github 的账户名就行了

部署步骤

每次部署的步骤,可按以下三步来进行。

hexo clean
hexo generate
hexo deploy

一些常用命令:

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

这里有大量的主题列表使用方法里面
都有详细的介绍,我就不多说了。
我这里有几款个人认为不错的主题,免去你们,一个一个的选了,欢迎吐槽我的审美,?
 Cover - A chic theme with facebook-like cover photo
 Oishi - A white theme based on Landscape plus and Writing.
 Sidebar - Another theme based on Light with a simple sidebar
 TKL - A responsive design theme for Hexo. 一个设计优雅的响应式主题
 Tinnypp - A clean, simple theme based on Tinny
 Writing - A small and simple hexo theme based on Light
 Yilia - Responsive and simple style 优雅简洁响应式主题,我用得就是这个。
 Pacman voidy - A theme with dynamic tagcloud and dynamic snow

一些基本路径

 文章在 source/_posts,编辑器可以用 Sublime,支持 markdown 语法。如果想修改头像可以直接在主题的 _config.yml 文件里面修改,友情链接,之类的都在这里,修改名字在 public/index.html 里修改,开始打理你的博客吧,有什么问题或者建议,都可以提出来,我会继续完善的。

Markdown语法参考链接: 作业部落

Q&A

问:如何让文章想只显示一部分和一个 阅读全文 的按钮?
答:在文章中加一个 <!--more--><!--more--> 后面的内容就不会显示出来了。

问:本地部署成功了,也能预览效果,但使用 username.github.io 访问,出现 404 .
答:首先确认 hexo d 命令执行是否报错,如果没有报错,再查看一下你的 github 的 username.github.io 仓库,你的博客是否已经成功提交了,你的 github 邮箱也要通过验证才行。

每周更新关注:http://weibo.com/hanjunqiang 新浪微博!手机加iOS开发者交流QQ群: 446310206

时间: 2024-12-31 02:06:43

快速使用HEXO搭建个人博客 韩俊强的博客的相关文章

Jekyll搭建个人博客 韩俊强的博客

之前写了一篇HEXO搭建个人博客的教程获得了很好评,有很多读者主动给我打赏,在此感谢. 如果你看过我的文章会发现我现在的博客样式跟之前是有很大的区别的,之前我也是使用 HEXO 搭建的博客,后来发现使用 HEXO 在多台电脑上发布博客,操作起来并不是那么方便,果断就转到了 Jekyll 上,接下来我会讲如何使用 Jekyll 搭建博客,博客模板效果. 介绍 Jekyll 是一个简单的博客形态的静态站点生产机器.它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Text

RxSwift使用教程大全 韩俊强的博客

接上一篇:初识RxSwift及使用教程 韩俊强的博客 本文档内容来自于 RxSwift 的 Playground.记录大多数 ReactiveX 的概念和操作符. (部分翻译和注解来自 ReactiveX文档中文翻译) Introduction 为什么使用 RxSwift? 我们写的很多代码实际上是为了解决和响应外部事件.当用户操作一个控件的时候,我们需要使用 @IBAction 来响应事件.我们需要观察通知来检测键盘改变位置.当 URL Sessions 带着响应的数据返回时,我们需要提供闭包

iOS中 HTTP/Socket/TCP/IP通信协议详解 韩俊强的博客

版权声明:本文为博主原创文章,未经博主允许不得转载. 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 简单介绍: [objc] view plain copy // OSI(开放式系统互联), 由ISO(国际化标准组织)制定   // 1. 应用层   // 2. 表示层   // 3. 会话层   // 4. 传输层   // 5. 网络层   // 6. 数据链接层   // 7. 物理层      // TCP/IP, 由美国国防部制定   // 1. 

iOS中 扫描二维码/生成二维码详解 韩俊强的博客

最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 指示根视图: self.window.rootViewController = [[UINavigationController alloc]initWithRootViewController:[SecondViewController new]]; 每日更新关注:http://weibo.com/hanjunqi

iOS11: 使用Xcode9后的11条小建议 韩俊强的博客

作者:韩俊强 原创地址:http://blog.csdn.net/qq_31810357/article/details/78060505 未经允许禁止转载! Xcode9已在9月20号推出, 相信很多人充满期待, 那么新版Xcode给我们带来哪些新东西呢? 下载后发现很多人哀声载道, 很大一部分是不适应新的编译器, 那么我们我们该如何去调整呢? 耐心看完本文或许你能找到一些答案! 1.模拟器的变化 相信很多人不太习惯新版模拟器, 那么如何恢复呢, 看下图:是不是切换很随意. 2.Jump to

iOS中 陀螺仪/加速器 韩俊强的博客

版权声明:本文为博主原创文章,未经博主允许不得转载. 引进框架: #import <CoreMotion/CoreMotion.h> 定义属性初始化相关: [objc] view plain copy #import "ViewController.h"   #import <CoreMotion/CoreMotion.h>      @interface ViewController ()      @property (nonatomic, strong) 

iOS中 CoreGraphics快速绘图(详解) 韩俊强的博客

第一步:先科普一下基础知识: Core Graphics是基于C的API,可以用于一切绘图操作 Core Graphics 和Quartz 2D的区别 quartz是一个通用的术语,用于描述在IOS和MAC OS X ZHONG 整个媒体层用到的多种技术 包括图形.动画.音频.适配. Quart 2D 是一组二位绘图和渲染API,Core Graphic会使用到这组API Quartz Core 专指Core Animation用到的动画相关的库.API和类 点和像素的对比 系统拥有坐标系,如3

HTML5中 HTML表单和PHP环境搭建及与PHP交互 韩俊强的博客

每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 知识点概括:HTML表单/PHP环境搭建/表单提交数据与PHP交互 第一部分:HTML表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> &l

HTML5中 基本用法及属性 韩俊强的博客

从今天开始更新H5相关学习:希望大家能一起学习,多学习一门语言,多一门乐趣! 了解Html5: Html5基本属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html的属性</title> </head> <body bgcolor="#ffe4c4">