大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
github:https://github.com/Daotin/Web
微信公众号:Web前端之巅
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、个人博客的搭建过程 1、常见个人博客搭建方案搭建个人博客一般有三种方式:
WorkPress:一般需要独立域名(收费),对 MarkDown 不友好
GitHubPages + Jekell:免费,稍微有点麻烦
GitHubPages + Hexo:免费,使用简单,使用者众多(我们接下来要介绍的博客的搭建就是基于这种方式。)
2、Hexo简介Hexo 是一个基于 Nodejs 的静态博客网站生成器,作者是来自 台@@湾 的 Tommy Chen
Hexo官网:https://hexo.io/
特点:
不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 Markdown
仅需一道指令即可部署到 GitHub Pages 和 Heroku
已移植 Octopress 插件
高扩展性、自订性
兼容于 Windows, Mac & Linux
3. 博客搭建正式开始(1)创建一个github仓库:Create a new repository.
(2)注意 Respository name 中一定要输入:你的用户名.github.io。其他地方不用修改,然后直接点 ”Create repository“ 按钮完成创建即可。
(3)本地环境搭建:
安装Git,步骤省略。
安装Nodejs,步骤省略。
安装Hexo,打开官网:
是不是很简洁,只有一条指令!而且我们只需要使用windows的cmd就可以下载安装。
打开cmd,输入指令:
npm install hexo-cli -gHexo安装完成,是不是超简单_
4、 创建本地博客在cmd里面定位到你想保存博客的文件夹(我的位于 G:/Blog/ 目录下)
用cmd定位到这个文件夹下:
之后,使用以下指令创建本地博客:
hexo init 你的用户名.github.io // 建议和创建仓库时使用同一个,我的是Daotin.github.io 5、 Next主题的安装经过上面步骤创建完本地博客之后,基本的博客系统就已经搭建好了,自带了 landscape 主题。不过该主题不是很符合我的审美,在网上搜索了一下 Hexo 主题,选择了用户量较大的 Next。
Next 是 iissnan 在 GitHub 上开源的一个 Hexo 主题,主打简洁,但是功能齐全,使用者众多。
”说明:“在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下(即 xxx.github.io 目录下),主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置有主题作者提供,主要用于配置主题相关的选项。为了描述方便,在以下说明中,将前者称为 “站点配置文件”, 后者称为 “主题配置文件”。
看下怎么安装Next主题:
cmd 下切换到本地 Daotin.github.io 目录下,之后输入如下指令:
git clone https://github.com/iissnan/hexo-theme-next themes/next之后我们就可以在 Daotin.github.io\themes\ 下看到 next 主题文件夹:
6、使用Next主题首先,复制一份打开本地博客目录下的 _config.yml 文件,命名为 _config.yml.bak,做为备份,以防改错。然后,使用文本编辑器打开本地博客目录下的 _config.yml 文件,搜索,定位 theme 键值,将原本的 theme 的值注释掉,新建一个新的 theme 值为 next.
theme: next注意:该配置文件中的键值之间一定要有空格,否则轻则没有作用,重则报错,无法启动。
7、 站点配置文件基本项修改这里先看看最基础的配置,也就是必须要改动的:
title: xxx # 博客的名字,也称站点名称 author: xxx # 作者名字 description: xxx # 对站点的描述,搜索引擎会抓取,可以自定义(这个还是加上比较好) language: zh-Hans # 语言 简体中文 theme: next # 配置主题 deploy: # 部署相关配置 type: git # 使用 Git 提交 repo: https://github.com/Daotin/Daotin.github.io.git # 就是存放博客的仓库地址上述配置是必须要修改的,再次强调,键值之间一定要 ”加空格“,请在文本编辑器中搜索定位后再修改。