hexo+github 搭建个人技术博客

创建一个github仓库

新建仓库

填写仓库信息

这个仓库的名字需要和你的账号对应, 如 linxunfeng.github.io 输入基本信息,然后点击下方的绿色按钮来创建仓库.

填写信息

安装Hexo

需要先在电脑中安装Node.js和git

  • node:用来生成静态页面的 到Node.js官网下载相应平台的最新版本,一路安装即可。
  • git: 把本地的hexo内容提交到github上去.没有安装的可以看此教程

接下来安装hexo 终端输入:(一定要加上sudo,否则会因为权限问题报错)

sudo npm install -g hexo

cd到你想存放博客的文件夹下,例如我在桌面上的gitHub目录下的一个hexo文件夹

由于这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。

cd /Users/username/Desktop/gitHub/hexo

然后在终端中输入 【hexo init】进行初始化,hexo会自动下载一些文件到这个目录

hexo init

初始化

初始化后目录结构如图

目录结构

启动Hexo

// 是开启本地预览服务
hexo s

启动Hexo

按提示在浏览器下打开

http://localhost:4000/

浏览器

配置Hexo

打开_config.yml,滑到最下面,将deploy的内容修改为如图所示内容

_config.yml

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

repository对应的值可以在这个地方复制过来,也可以自己动手修改上面的配置

repository

注意了:hexo的配置文件(不仅仅是_config.yml),只要出现【:】,后面一定要加上个空格,不然会报错

生成静态页面

hexo g
// 或者
hexo generate

生成静态页面

若出现如下报错:

ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

则执行命令:

npm install hexo --save

若无报错,自行忽略此步骤。

此时目录下会多出一个public文件夹,里面存放的就是我们刚刚生成的静态页面

目录结构

上传到github

hexo deploy
// 或者
hexo d

如果执行后报错

Deployer not found: github 或者 Deployer not found: git

则需要我们再安装一个插件:

npm install hexo-deployer-git --save

Deployer not found: git

安装完插件之后再执行一下【hexo d】,它就会开始将public文件夹下的文件全部上传到你的gitHub仓库中

Paste_Image.png

如果你之前未关联过Github,则执行hexo deploy命令时终端会提示你输入Github的用户名和密码,按提示输入即可

浏览器中打开网址[https://linxunfeng.github.io/] 显示的页面与http://localhost:4000 一样,这里的https://linxunfeng.github.io 换成你自己的仓库名称

Paste_Image.png

发布文章

终端cd到你的博客文件夹下,执行如下命令新建文章:

hexo new "postName"

名为postName.md的文件会建在目录/blog/source/_posts下。

文章编辑完成后,终端cd到你的博客文件夹下,执行以下两个命令:

hexo generate             //生成静态页面
hexo deploy            //将文章部署到Github

安装主题

Hexo官网主题页去寻找你自己喜欢的主题,这里以NexT.Muse为例 终端cd到你的博客文件夹下执行如下命令:

// 将hexo-theme-next这个主题克隆到 ./themes目录下,并修改文件夹名字为next
git clone https://github.com/iissnan/hexo-theme-next themes/next

hexo-theme-next

将_config.yml 里theme的名称landscape修改为next

设置主题

然后再执行如下命令(每次部署文章的步骤):

//清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean 
//生成缓存和静态文件
hexo g 
//重新部署到服务器
hexo d 

至于更改theme内容,比如名称,描述,头像等去修改./_config.yml文件和./themes/next/_config.yml文件中对应的属性名称即可,不要忘记冒号: 后加空格。详细的介绍请参考NexT 使用文档

问题小提示

当遇到一些莫名其妙的问题时,可以尝试先执行命令:

sudo npm install

出现问题的行为比如:换了一台MBP ; 不小心执行了【hexo init】等。 出现的问题比如:执行 【hexo g】生成静态页面,并【hexo s】 来开启本地预览的时候,页面只出现

Cannot GET /

此时你会发现publish文件夹下生成的文件有什么缺少了~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PHP实战技术

yum安装mysql 5.6

http://repo.mysql.com/yum/

4119
来自专栏PHP实战技术

yum安装mysql 5.6

http://repo.mysql.com/yum/

2195
来自专栏Youngxj

bat锁机代码

9569
来自专栏向治洪

openfire环境搭建

1、下载源代码:http://www.igniterealtime.org/downloads/source.jsp ? 2、把源代码解压出的openfire_...

1795
来自专栏木子昭的博客

Python数据挖掘 环境搭建

deepin 有很多小伙伴想学习python,但windows写python基本是坑,deepin属于linux分支,界面美观,内置大量桌面软...

3428
来自专栏每日一篇技术文章

weex-05-调试工具的使用

发现浏览器页面和手机页面同步,你可以点击手机上面的cell 试试看,发现不能跳转页面,可能做了限制!

671
来自专栏cloudskyme

Eclipse TOMCAT 插件:Sysdeo Tomcat Launcher Plugin

很好的一个Eclipse Tomcat 连接插件 截至到2008-09-04,最新版本是 3.2.1,于2007-05-10发布。 支持: Eclipse 3...

3416
来自专栏HTML5学堂

wamp的使用与安装

HTML5学堂:突然发现官网里没有写关于wamp的文章,竟然没有wamp的安装,竟然真的没有wamp(利利碎碎念中),于是乎,来普及一下吧,看看wamp是什么,...

4094
来自专栏乐沙弥的世界

Virtual Box下安装Oracle Linux 6.3

      Oracle Linux 6.3已经发布快2年了,其功能有很大的提升,增强了KVM,文件卷的在线resizing,LVM支持 raid4, 5, 6...

402
来自专栏高性能服务器开发

用Visual Studio调试linux程序

用Visual Studio调试linux程序?你真的没看错,这个是真的,不是标题党。当然如果你说VS2015及以上版本自带的linux调试插件,那就算了。这些...

4076

扫码关注云+社区