hexo | 主题更新详细教程,简单几步搞定

相信学大前端的粉丝们,学习了上篇文章《前端技术小白零基础搭建免费个人网站》已经成功的把网站建成了!


网站默认的样式可能不好看,没有个性,还不带留言功能;所以,今天继续写一下关于页面美化的文章。小哥哥小姐姐们,赶紧跟着我动手实操吧~


1、下载主题文件


先把本地的themes文件夹里的landscape文件夹删除,删除前请备份一份到其他盘里


然后,在本地电脑的网站根目录里,空白处右键点击打开Git Bash Here



接着输入命令:

 git clone https://github.com/Tycn/hexo-theme.git themes/landscape



2、安装主题文件必要插件


依次在Git Bash Here输入以下命令进行插件安装:

    npm install hexo-renderer-ejs --save
    npm install hexo-renderer-less --save
    npm install hexo-deployer-git --save


3、部署


如果没有更改过主题源文件可以跳过1,2步骤

  1. Gulp打包构建,压缩优化部署前的代码。 

    npm install   //安装项目依赖
  1. 拷贝gulpfile.js文件到项目根目录下(非主题目录)

    gulp   //执行打包任务
  1. 清空hexo静态文件和缓存,并重新生成

    hexo clean  //清空缓存
  1. 重新生成静态文件

    hexo g  //生成静态文件
  2. 本地预览,确没有问题再进行发布

    hexo s  //启动本地服务默认
  1. 当gulp执行完成,进行发布

    hexo d  //部署发布到Github上


就这样大功告成了~  来看下效果图吧!(阅读原文可以直接查看)



- END -