从头搭建我的博客网站

516 阅读2分钟

不断的摄入也需要输出,才能看到相对成本,便于更好进步,搭建一个博客更好的输出

1、选择静态博客模板框架

因为我没有太多的功能需求,目前选择使用静态博客框架,目前市面上框架也很多,比较主流的如:Jekyll(Ruby语言) Octopress(基于Jekyll) Hexo(Node语言) Hugo(GO语言)等,详细信息大家可以搜索引擎,本文选择Hexo来搭建博客网站。

2、安装本地开发环境

  • 安装Node.js 地址:nodejs.org/zh-cn/ 默认会安装NPM包管理器
  • 查看Node版本和npm版本:node -v/npm -v 安装最新版本就行

3、安装Hexo

npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装cnpm
cnpm install -g hexo-cli 安装Hexo框架生成器
mkdir blog 创建博客目录
cd blog 进入目录
hexo init 初始化博客生成器
hexo s/hexo server 启动本地博客
hexo n "新建博客" 新建博客文件
hexo g 打包成静态文件,默认在public目录下

4、添加主题全局配置

将以下配置添加至博客根目录下的_config.yml文件最后

jsonContent:
  meta: false
  pages: false
  posts:
  title: true
  date: true
  path: true
  text: false
  raw: false
  content: false
  slug: false
  updated: false
  comments: false
  link: false
  permalink: false
  excerpt: false
  categories: false
  tags: true

5、接入评论功能

Hexo默认支持的评论接口在themes/yilia/_config.yml配置文件中,多说、网易云跟帖、畅言、Disqus、Gitment,本文使用的是畅言接入

6、上传静态文件到云服务器

如果有云服务器(腾讯云,阿里云,百度云,京东云等)将静态博客文件上传到指定目录,使用nginx代理静态文件,就大功告成啦!

7、个性化修改

  • 所有的个性化主题配置基本都在themes/yilia/_config.yml下,大家可以自行摸索,具体可以参考:github.com/litten/hexo…
  • 去除畅言评论发表下方的广告: themes/yilia/layout/_partial/post/changyan.ejs文件结尾添加:
    <style>
      .section-service-w {
        margin-top: -250px !important;
        transform: scale(0) !important;
      }
    </style>
    
    最终效果如下: WeChat58f6a40eff4f8a78d0ab262a4d9c5770.png
  • 截取文章部分内容作为摘要 添加<!-- more --> 至需要截取的Markdown文章相应的位置即可
  • 分页设置如果当前博客数小于每页大小是不会展示分页组件的,分页配置通过Hexo配置文件进行设置

8、服务器部署,自动化部署

下一篇 博客自动化部署 详细记录下来