从头开始搭建hexo+github+hexo-theme-next主题博客(基本设置)

1 篇文章 0 订阅
1 篇文章 0 订阅

参考博客:https://www.jianshu.com/p/b5495e551686

(把博客配置到github就不多说了,忘了可以看博客)

1:首先安装好hexo,git,npm等工具

2:新建一个文件夹(名字随便取,我的是blog-generator),打开命令行进入新建的文件夹使用命令

hexo init

 

初始化文件夹完成后该文件夹中有如下文件/文件夹

其中

_config.yml ##hexo的配置文件
 node_modules/ ##文件夹下放的是npm依赖模块
package.json  ##npm所有依赖包的json文件
 package-lock.json  ##这个不清楚是干什么用的,不过后面我没用到就不管了
scaffolds/  ##这个文件夹我也没用到
source/  ##这个文件夹下方的是我发布文章博客资源文件
themes/  ## 这里放的是hexo主题文件夹

好了,接下来我就可以运行了

运行一下命令:

hexo clean ## 清空上次部署时生成的文件,第一次部署的话可以不用此命令
hexo g     ## 是hexo generate的简写,生成部署文件
hexo s     ## 是hexo server的简写,部署

以上三个命令可以这样写
hexo clean && hexo g && hexo s

接下来就可以访问本地4000端口http://localhost:4000/看到如下页面了

注意:这里如果在启动的时候4000端口被占用的话可以在hexo s命令后加参数-p 8080,就可以通过其他端口运行了

3:接下来就是下载hexo-theme-next主题,直接把从github上下载,也可以通过git命令拉下来:

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

然后把拉下来的整个文件夹放在/blog-generator/themes/文件夹下然后修改hexo的配置文件_config.yml中的theme项,改为hexo-theme-next就可以了

我在修改主题的时候出现了一下错误:

报的错误是找不到布局的html文件,查了一下,都说是要重新使用git clone主题,我重新试了一下,还是一样,最后发现我在修改hexo的配置文件的theme为hexo-theme-next后未保存,而我又把原来的主题文件夹删掉了,所以才会报上面的错误。

4:ok启动完成后访问http://localhost:4000/就可以看到修改了主题了:

5:修改主题样式,把主题设置文件/blog-generator/themes/hexo-theme-next/_config.yml中的

scheme:Muse注释掉,把Mist的注释放开如下:

ok,重启看效果如下

感觉这个不太好看,换一个,换成

Pisces,再看一下效果:

6:接下来添加图像(用户图像):

首先在主题配置文件中搜索Sidebar,几个参数设置文件中也有说明,还是比较容易理解的,由于默认的效果就挺不错,所以有兴趣可以更改看看即可。下面的avatar选项放开注释,并修改如下

然后在/blog-generator/source目录下新建文件夹uploads,把自己的图像复制到该文件夹下修改名字为avatar.gif

最后重启就可以了,效果如下:

 

以上。

这些都是相对简单的设置,接下来我准备来配置一些高级设置。

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值