从零开始搭建博客简明教程

发表于 | 分类于 | |
字数统计: 1,983 字 | 阅读时长 ≈ 8 分钟

你是不是早就厌倦了那些博客网站毫无美感的界面，是不是受够了无休无止的网站推送，是不是早就想建立一个属于自己的博客，却止步于复杂的教程以及一系列令人头疼的代码？那么恭喜你，这篇文章就是想以最浅显易懂的方式手把手教你搭建属于自己的博客，你只需要一点耐心，一步步跟着做。

Hexo 作为一个快速、简洁且高效的博客框架，简直是小白们的福音，而 GitHub 又免去了我们额外租用并部署服务器的麻烦。因此本文将利用 Hexo 及 GitHub 搭建博客。

准备工作

本地搭建hexo静态博客

  • 安装hexo框架: 打开cmd 运行

    1
    $ npm install -g hexo-cli

  • 新建一个文件夹，如 MyBlog ，进入该文件夹内，右击运行 git ，输入：

    1
    $ hexo init

  • 生成完 hexo 模板，安装 npm ，运行：

    1
    $ npm install

没错，博客的主体部分到此已经完成了，来看看效果吧。运行：

1
$ hexo server

这时候打开浏览器，输入 localhost:4000 就可以看到博客目前的样子了。小小激动一下，然后按 Ctrl + C 就可以继续下面的操作了。

个性化设置（初步）

更换主题

  • 下载新的主题（以NexT 主题为例），在根目录下运行：
    1
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next

  • 打开根目录下的 _config.yml ，修改字段 theme 为:

    1
    theme: next

  • 选择外观：打开 /themes/next 目录下的主题配置文件 config.yml ， 找到 scheme 字段（可用 Ctrl + F 快捷查找）。NexT提供了三种不同的外观，可以挑选一个自己喜欢的，然后去掉其中一个的 # 号(后续主要修改的也就是这两个文件： 站点配置文件 和 主题配置文件_ 。)。

    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    scheme: Mist
    #scheme: Pisces
    #scheme: Gemini

  • 查看效果，可运行如下命令(以后每次想查看效果都可重复此步骤)：

    1
    2
    hexo g
    hexo server

站点配置

  • 使用编辑器打开根目录下的站点配置文件 _config.yml （Windows下不要使用记事本编辑，中文标题会出现乱码），修改字段 Site ， 注意冒号后面要有空格：
    1
    2
    3
    4
    5
    6
    7
    # Site
    title: 未知的世界                //博客名称
    subtitle:
    description:  Do something cool //一句签名
    author: LulalaP                 //作者
    language: zh-Hans               //网站语言
    timezone:

设置侧边栏头像

  • 在 /source 中新建文件夹并命名为 uploads , 将头像图片（如： avatar.jpg ）放到该文件夹内

  • 打开 /themes/next 目录下的主题配置文件 _config.yml ，找到字段 avatar 并修改为:

    1
    avatar: /uploads/avatar.jpg

完善博客页面

添加菜单

  • 在主题配置文件 _configy.yml 设置中将字段 menu 中需要添加的菜单前面的注释去掉即可。如需要添加其他菜单可按需添加（注意字段的缩进）：
    1
    2
    3
    4
    5
    6
    menu:
      home: /
      categories: /categories
      archives: /archives
      tags: /tags
      about: /about

创建分类页面

  • 新建一个页面，命名为 categories ，命令如下：

    1
    $ hexo new page categories

  • 编辑刚新建的页面 /source/categories/index.md ，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类（注意保留冒号后的空格）。

    1
    2
    3
    4
    5
    title: 分类
    date: 2018-01-23 13:37:11
    type: "categories"
    comments: false
    ---

创建标签云界面

  • 新建一个页面，命名为 tags ，命令如下:

    1
    $ hexo new page "tags"

  • 编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。

    1
    2
    3
    4
    5
    title: 所有标签
    date: 2018-01-22 14:09:12
    type: "tags"
    comments: false
    ---

创建”关于我”页面

  • 新建一个 about 页面：

    1
    hexo new page "about"

  • 编辑刚新建的页面，可在正文处用Markdown格式写下信息。

    1
    2
    3
    4
    title: 关于
    date: 2018-01-22 14:09:12
    comments: false
    ---

设置侧边栏社交链接

  • 编辑站点的 _config.yml，新增字段 social，然后添加社交站点名称与地址即可。键值格式为 显示名称：链接地址 ，例如：

    1
    2
    3
    4
    5
    6
    7
    8
    # Social links
    social:
      GitHub: https://github.com/your-user-name
      #Twitter: https://twitter.com/your-user-name
      微博: http://weibo.com/your-user-name
      #douban: http://douban.com/people/your-user-name
      #知乎: http://www.zhihu.com/people/your-user-name
      # 等等

  • 编辑主题的 _config.yml, 在social_icons字段下添加社交站点名称（注意大小写）与(图标)[http://fontawesome.io/icons/]。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。例如：

    1
    2
    3
    4
    5
    6
    7
    8
    social_icons:
      enable: true
      # Icon Mappings.
      # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
      GitHub: github
      Twitter: twitter
      Weibo: weibo
      Linkedin: linkedin

将博客与GitHub关联

  • 注册GitHub账号：如果还没有GitHub账号的，需要先注册一个

  • 在Github上创建名字为XXX.github.io的项目，XXX为自己的github用户名。

  • 打开本地的MyBlog文件夹项目内的_config.yml配置文件，将其中的type设置为git:

    1
    2
    3
    4
    deploy:
      type: git
      repository: https://github.com/your-name/your-name.github.io.git
      branch: master

  • 运行：

    1
    npm install hexo-deployer-git --save

  • 本地生成静态文件，并将静态文件推送至GitHub，运行：

    1
    2
    hexo g
    hexo d

    此时，打开浏览器，访问 http://your-name.github.io ，恭喜你，到此为止你的博客已经建设完毕了。

绑定域名

到目前为止博客已经全部搭建完成，也能通过 GitHub 的域名访问，这时候再用一个短域名绑定到这个博客上就更完美了。

域名购买

  • 购买一个域名（待补充）

域名解析

  • 域名提供商设置

  • 添加4条A记录（2019-04-15更新）：

    @—>185.199.108.153
    @—>185.199.109.153
    @—>185.199.110.153
    @—>185.199.111.153

  • 添加一条CNAME记录：

    CNAME—>lulalap.github.io

  • 博客目录添加 CNAME 文件

    配置完域名解析后，进入博客目录，在source目录下新建一个命名为 CNAME 的文件(注意要大写，没有后缀)，用记事本打开编辑，写入购买好的域名，如：www.lulalap.com

  • 运行：

    1
    2
    hexo g
    hexo d

现在打开浏览器，输入域名，回车，恭喜你已经拥有了一个属于自己独立域名的博客。

发布新文章

  • 在博客根目录下执行：hexo new “我的第一篇文章”，会在 source/_posts 文件夹内生成一个.md文件。

  • 编辑该文件，修改起始字段为：

    1
    2
    3
    4
    5
    6
    7
    title 文章的标题
    date 创建日期 （文件的创建日期 ）
    updated 修改日期 （ 文件的修改日期）
    comments 是否开启评论 true
    tags 标签
    categories 分类
    permalink url中的名字（文件名）

  • 编写正文内容(遵循 Markdown 规则)

  • 本地生成静态文件，并将静态文件推送至GitHub，运行：

    1
    2
    hexo g
    hexo d

个性化设置（进阶）

添加 RSS

  • 在根目录下安装插件

    1
    $ npm install hexo-generator-feed --save

  • 在主题文件的 config.yml 里面的末尾添加：(**请注意在冒号后面要加一个空格，不然会发生错误！_**)

    1
    2
    3
    # Extensions
    ## Plugins: http://hexo.io/plugins/
    plugins: hexo-generate-feed

  • 打开 next 主题文件夹里面的 _config.yml ,在在 rss: 的后面加上 /atom.xml (注意在冒号后面要加一个空格)

    1
    rss: /atom.xml

首页文章截断

  • 每次写文章正文时，只需要在文章 .md 中需要截断的地方增加：

    1
    <!--more-->

  • 将主题目录下配置文件里的 scroll_to_more 这个选项设置为 false 。

设定站点建立时间

  • 编辑站点的 _config.yml ，新增字段 since 。

    1
    since: 2013

相关阅读

Hexo-NexT搭建个人博客（二）
hexo的next主题个性化教程:打造炫酷网站
hexo进阶
打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化