快速搭建Hexo主题的博客

小熊 网站建设28,373字数 2326阅读7分45秒阅读模式

摘要:csdn和博客园虽然用的人多、技术氛围好,但是由于csdn的广告和灌水以及博客园的简陋页面让我决定搭建一套属于自己的博客,此处用到比较火的hexo搭建,而且免费就能获得自己的网站,如果不买域名的话完全够用了。


一、搭建本地 hexo

1.1 安装nodejs

到nodejs官网下载安装 http://nodejs.cn/

1.2 安装git

到git官网下载安装 https://git-scm.com/downloads

1.3 使用npm安装Hexo

npm install -g hexo-cli

备注: 如果npm下载比较慢可以跳到 附:加速npm

1.4 创建本地服务

创建一个文件夹,此处为blog,执行以下命令

hexo i blog //init的缩写 blog是项目名
cd blog //切换到站点根目录
hexo g //generetor的缩写
hexo s //server的缩写

快速搭建Hexo主题的博客

访问本地服务localhost:4000证明成功,为什么和我的不一样,因为我修改了hexo的主题配置可以跳到 四、个性化配置你的博客

快速搭建Hexo主题的博客

有页面出来证明你的配置已经成功了,原始的主题不是很喜欢,我这里也使用了最火的nexT主题

1.5 主题配置

在站点根目录输入

git clone https://github.com/iissnan/hexo-theme-next themes/next

完成后,打开根目录下的_config.yml, 找到 theme 字段,并将其值更改为 next

快速搭建Hexo主题的博客

next有三种主题,我选择的是双栏 Scheme,找到 站点根目录/themes/next/_congig.yml 文件,再找到schme字段,将其值改为Pisces,其他两种可以参考引用里所写的

快速搭建Hexo主题的博客

使配置生效

hexo clean  //清除缓存
hexo g  //重新生成代码
hexo s  //部署到本地

这样你的会有一套和我一样主题的博客了,如果你不喜欢这套主题,或者想自己来开发一套定制自己的主题参考官方文档,下面让我们把他推到github上,变成独一无二的网站

二、 配置你的github

2.1 创建一个新项目

如果没有注册github帐号到>官网注册

点此创建项目(如果你不是程序员建议勾选上图中Initalize this repository with a README选项):

快速搭建Hexo主题的博客

2.2 填写正确的项目名称

项目名可以为任意英文.github.io,public设置为公开项目,点击绿色创建按钮

快速搭建Hexo主题的博客

2.3 配置你的项目

在项目里创建一个readme.md即可,这下可以在页面上访问到这个免费的网站了

我的网站 https://pzqu.github.io/

三、激动人心的博客

3.1 修改hexo配置文件

修改根目录的配置文件_config.yml,以下部分如果没有需要手动创建,建议直接拷贝我的,repo为自己刚刚创建的那个项目的git链接(注意冒号与值之间必须有空格)

deploy:
  type: git
  repo: https://github.com/pzqu/pzqu.github.io.git
  branch: master

3.2 部署成功

直接执行一套命令,再刷新刚刚的域名即可

npm install hexo-deployer-git --save
hexo d  //  部署的命令,会生成代码并推送到github上去

四、个性化配置你的博客

4.1 配置博客名,博客描述等信息

参考官方网站 https://hexo.io/zh-cn/docs/configuration.html

4.2 添加头像

在主题配置文件里修改

avatar: images/avatar.gif

4.3 添加日志列表

4.2 其他

添加顶部加载条,修改主题配置文件,pace_theme有好几款,自己选一款

pace: true
pace_theme: pace-theme-flash

添加打赏功能,修改主题配置文件,图片可以上传到themes\next\source\images

reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /images/wxpay.jpg
alipay: /images/alipay.jpg

文章阅读量

参考 https://www.jianshu.com/p/702a7aec4d00

评论系统

http://www.zhaojun.im/hexo-valine/

删除底部强力驱动、统计站点网上自己查

添加分享

添加评论

五、配置你的hexo可以插入图片

  1. 把主页配置文件 _config.yml 里的post_asset_folder:这个选项设置为true
  2. 在你的hexo目录下执行npm install hexo-asset-image --save
  3. 等待一小段时间后,再运行hexo n "配置像我一样的hexo博客"来生成md博文时,/source/_posts文件夹内除了配置像我一样的hexo博客.md文件还有一个同名的文件夹
  4. 最后在配置像我一样的hexo博客.md中想引入图片时,先把图片复制到配置像我一样的hexo博客这个文件夹中,然后只需要在配置像我一样的hexo博客.md中按照markdown的格式引入图片,注意使用相对路径:

![你想输入的替代文字](配置像我一样的hexo博客/图片名.jpg)

附:加速npm

配置npm镜像npm config set registry https://registry.npm.taobao.org

查看npm镜像npm config get registry


引用

用Hexo + github搭建自己的博客 --- 再也不用羡慕别人了!

npm太慢, 淘宝npm镜像使用方法

ps: 可惜的是,我最后还是弃用了,如果你看到我最近更新的这篇文章的话,你应该是在https://coding3min.com 新博客链接里看到的了。

weinxin
公众号
扫码订阅最新深度技术文,回复【资源】获取技术大礼包
小熊