网站的搭建之旅

写在前面

从去年看了一个学长的个人博客之后,就想写一个属于自己的博客网站,但是苦于自己只会前端,不会后端。没有后台管理的网站还叫网站么?后来了解到Hexo是基于本地文件自动生成html的一个网站搭建工具。想着用这个应该能满足自己的需要吧,就着手开始学习搭建了。搭建了一段时间,又因为没有自己满意的模板就搁置了。到了今年才又想起自己还有一个博客,所以花了几天时间把这项任务完成吧。

博客介绍

博客分类分为技术、日常、影评、转载。“技术”和“转载”主要就是在学习上的总结和汇总。而“日常”呢就是分享自己生活中发生的事,这些事或有趣或无聊,或着只是我的一句牢骚。“影评”会分享自己对一部电影的见解。本人不是专业的影评人,对电影的评价也是自己眼中。一千个人就有一千个哈姆雷特,如果有不同看法的,欢迎和我一起讨论。
清单分类为书单、影视、歌单。书单就不用说了,也不知道自己会认真看完几本书哈哈哈。“影视”主要就是一个记录我在看,看完的电视剧和电影。“歌单”呢主要是向大家推荐一些我喜欢的专辑和单曲,主要以欧美为主啦。

博客搭建

准备环境

  1. 安装Node.js
  2. 安装GIt
  3. 安装Hexo,在命令行(Git Bash)运行一下命令:

    1
    npm install hexo
  4. 初始化Hexo,在命令行(Git Bash)依次运行以下命令

    1
    2
    3
    4
    hexo init  /*初始化Hexo环境,这时会在目录下自动生成hexo文件*/
    npm install /*安装npm依赖包*/
    hexo generate /*生成静态页面*/
    hexo sever /*生成本地服务*/

    此时你打开浏览器输入http://localhost:4000,如果出现了Hexo博客的默认主题,那么就搭建好了博客。

将博客发布到网上

  1. 在github上创建一个和自己账户名字一样的空仓库
  2. 打开本地Hexo文件夹下面的_config.yml文件进行编辑
    在文件最下方将deploy的选项改成以下形式,将yourname修改为你自己的名称

    1
    2
    3
    deploy:
    type: git
    repo: git@github.com:yourname/yourname.github.io.gitbranch: master
  3. 然后在Git Bush中执行

    1
    npm install hexo-deployer-git --save
  4. 最后执行

    1
    hexo deploy

    就可以在浏览器http://yourname.github.io/访问博客了

博客主题

Hexo中有很多主题,选择一款你自己喜欢的主题和一款优秀的主题会让你在网站搭建中轻松很多。
我选用的主题是 Sakura,这款主题符合我对自己网站的一个幻想,而且功能大致也是我需要的。
大家可以选择自己满意的主题。

切换主题

  1. 下载主题
  2. 将下载好的主题文件夹,粘贴到Hexo文件下的themes下。
    我下好的主题
  3. 在_config.yml(不是主题文件下的哦)更改主题名称为你下载的主题
    修改主题
  4. 完成后,如果你的主题变化了。那么你就成功了

扩展主题

大家可以按照自己需求扩展主题的功能和样式。可以添加live2d,外链音乐播放器(推荐Aplayer)等等。
我重写了一个歌单推荐的样式。
歌单推荐
还算可以吧嘻嘻。

参考博客

在搭建这个博客的时候也去查阅了很多资料,阅读了很多博客。
遇见西门 👈这篇博客上面总结的全面,但是因为涵盖太多方面导致有些内容太过省略。
博客 👈这篇博客详细的写了如何搭建Hexo以及可能会遇到的问题与解决方法,对新手友好。
Aplayer 👈这篇博客详细写明了Aplayer的使用方法。


Stay Hunger, Stay Foolish