使用Hexo搭建个人博客网站

网站的搭建之旅

网站链接

写在前面

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

博客搭建

准备环境

  1. 安装Node.js
  2. 安装GIt
  3. 安装Hexo,在命令行(Git Bash)运行一下命令:
    npm install hexo
    
  4. 初始化Hexo,在命令行(Git Bash)依次运行以下命令
    hexo init  /*初始化Hexo环境,这时会在目录下自动生成hexo文件*/
    npm install  /*安装npm依赖包*/
    hexo generate /*生成静态页面*/
    hexo sever /*生成本地服务*/
    

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

将博客发布到网上

  1. 在github上创建一个和自己账户名字一样的空仓库
  2. 打开本地Hexo文件夹下面的_config.yml文件进行编辑
    在文件最下方将deploy的选项改成以下形式,将yourname修改为你自己的名称
    deploy:
    type: git
    repo: [email protected]:yourname/yourname.github.io.gitbranch: master
    
  3. 然后在Git Bush中执行
    npm install hexo-deployer-git --save
    
  4. 最后执行
    hexo deploy
    
    就可以在浏览器http://yourname.github.io/访问博客了

博客主题

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

切换主题

  1. 下载主题
  2. 将下载好的主题文件夹,粘贴到Hexo文件下的themes下。
    使用Hexo搭建个人博客网站_第1张图片
  3. 在_config.yml(不是主题文件下的哦)更改主题名称为你下载的主题
    使用Hexo搭建个人博客网站_第2张图片
  4. 完成后,如果你的主题变化了。那么你就成功了

扩展主题

大家可以按照自己需求扩展主题的功能和样式。可以添加live2d,外链音乐播放器(推荐Aplayer)等等。
我重写了一个歌单推荐的样式。
使用Hexo搭建个人博客网站_第3张图片
还算可以吧嘻嘻。

参考博客

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

你可能感兴趣的:(前端,个人博客)