手把手教你用Hexo搭建个人技术博客

前言

其实大四实习那会就有搭建个人技术博客的想法了,然后还是懒,搁置了很久。前阵子在掘金发了几篇之前写过的文章,收获了不少赞和阅读量,有点小小的成就感,所以这点动力驱使自己动手了~有些人会觉得搭建个人博客需要购买域名,需要花钱,其实不是的,Github就可以帮助我们免费生成静态网址,这一点后面会提到的。

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。此处附上Hexo中文官网。下面我们详细介绍搭建步骤。

安装Git Bash

Git Bash是Windows系统下git的命令行工具。

  • 下载地址
  • 安装步骤:双击下载好的exe文件,一路next就可以
  • 确认成功:执行git version,控制台打印出对应git版本就说明安装成功了。

安装Node

Hexo是基于Node环境的静态博客,npm工具是必不可少的。

  • 下载地址
  • 安装步骤:基本操作,这里就不赘述了。
  • 确认成功:执行node -v,控制台打印出对应Node版本就说明安装成功了。

安装Hexo

  • 先创建本地存放blog的文件夹,然后cd到对应目录下。
  • 安装命令:npm i -g hexo(建议用cnpm安装,会相对快一些)
  • 确认成功:hexo -v

  • 初始化:hexo init,之后打开的文件夹如下图:

  • 简单解释下文件夹的作用

node_modules:依赖包

scaffolds:命令生成文章等的模板

source:用命令创建的各种文章

themes:主题

_config.yml:整个博客的配置

package.json:项目所需模块项目的配置信息

搭桥到Github

  • 没账号的创建账号(程序猿不应该吧~),有账号的看下面步骤:

  • 回到gitbash,配置github账号信息(YourName和YourEail都替换成你自己的)

  • 创建SSH,在gitbash输入:ssh-keygen -t rsa -C "youremail@example.com,生成ssh,然后按照下图找到id_rsa.pub

  • 将获取的ssh放到github中:

临门一脚

  • 用编辑器打开blog项目,修改_config.yml文件的一些配置(记得冒号后必须有空格,不然配置不生效,这是Hexo的一个坑!
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master
复制代码
  • 进入blog项目,分别执行以下命令:
hexo clean
hexo generate
hexo server
复制代码
  • 打开浏览器输入:http://localhost:4000,见证奇迹的时刻到了~

上传到Github

  • 需要先安装Hexo上传仓库的工具,执行npm install hexo-deployer-git --save,这样你写好的文章才能部署到github服务器。
  • 执行命令(建议每次都这样做,先清除、再编译上传)
hexo clean
hexo generate
hexo deploy
复制代码
  • 在浏览器输入http://yourgithubname.github.io,这样你就可以看到自己的在线博客了~

优化博客

有些童鞋一开始看到这博客,哇,好丑~大家都有经验的,默认的主题都是不好看的,这里有Hexo主题网址,目前有195个主题任你选,每周换一个都可以换三年~(当然你能这么折腾我也服了~)具体怎么安装主题,点进去对应的地址都有详细说明,这里就不赘述了。这里秀一波我的个人博客地址,有空过来刷刷PV也是很ok的~

写博客

最后的最后,怎么写博客?

  • 新建文章:hexo new '文章名',然后在blog的source文件夹就可以看到了。
  • 写内容:支持markdown语法,所以我自己现在是用掘金自带的markdown编辑器写完后把文章复制过来的,完美兼容~
  • 本地看过没问题就上传到github,步骤前面也说了,一般上传后github服务器会有点延迟,十分钟后刷新应该就有最新的blog了。

结尾

embers的个人博客(会经常更新)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值