十分钟教你从零开始搭建个人博客(基于Hexo)

先看效果：网址 备用

环境搭建

推荐一个UP主的视频，讲的很不错：手把手教你从0开始搭建自己的个人博客 |无坑版视频教程|

首先安装Node.js

这里以Ubuntu为例

sudo curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs

更新Nodejs版本也非常方便，只需要利用n工具，如下

npm install -g n #安装n工具
n stable # 升级到最新稳定版
n latest # 升级到最新版

查看node 和 npm是否安装成功

node -v	#查看node版本
npm -v	#查看npm版本

下载安装淘宝的cnpm 管理器，方便更加快速的进行包管理

npm install -g cnpm --registry=http://registry.npm.taobao.org	#安装淘宝的cnpm 管理器
cnpm -v	#查看cnpm版本

如果执行了这一步，那么之后的操作就可以利用cnpm替代npm进行操作

然后安装Hexo

cnpm install -g hexo-cli    #安装hexo框架
hexo -v	#查看hexo版本

创建博客

mkdir blog	#创建blog目录
cd blog	 #进入blog目录

sudo hexo init 	#生成博客 初始化博客
hexo n "我的第一篇文章" #创建新的文章
hexo clean #清理
hexo g #生成
hexo s	#启动本地博客服务 http://localhost:4000/	#本地访问地址

执行到这里就已经可以在http://localhost:4000/上看到自己的博客了

编辑_config.yml修改个人信息

title: 你的博客(个人网站)名称
subtitle: 你的博客(个人网站)子名称
description: '你的博客（个人网站）的描述'
keywords: 你的博客（个人网站）的关键字
author: 你的博客（个人网站）的作者
language: 你的博客（个人网站）语言 en：英文 zh-CN：简体中文
timezone: '时区（可以不用配置）'

博客配置

部署在Pages服务上

• 首先在Github或者Gitee创建一个新的仓库 YourGithubName.github.io

• 在blog目录下安装git部署插件 cnpm install --save hexo-deployer-git

• 配置_config.yml

  deploy:
  type: git
  repo:
  github: git@github.com:yourname/yourname.github.io.git
  coding: git@git.coding.net:yourname/yourname.coding.me.git
  branch: master

• hexo d #部署到Github仓库里 第一次需要进行git的初始化

• 打开Github/Gitee的pages服务，Gitee需要手动刷新。

• 访问域名(https://用户名.github/gitee.io)查看是否成功

部署在服务器

在服务器上部署可以指定hexo打开的端口为80端口，浏览器直接访问服务器ip就能够进入博客，命令：hexo s -p 80。但是这样打开服务的话，hexo进程是一个前端进程，且依赖于打开的shell，一旦其父进程即shell关闭后，hexo服务也就关闭了。可以使用nohup命令实现hexo在后台独立打开，命令：nohup hexo s -p 80 & 想要关闭hexo服务只需要用kill命令将其杀死即可。

如果有自己的域名的话，可以设置一个A类映射，将服务器ip映射的自己的域名上，这样下次就可以直接通过域名来访问自己的博客了，不过要注意国内的域名开通博客需要备案。

博客美化

换主题

• 首先下载主题到本地的 blog/themes文件夹下：

  git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia #下载yilia主题到本地

• 然后修改hexo根目录下的 _config.yml 文件 ： theme: yilia # 将theme一栏的值改为要应用的主题名。

• 最后应用主题

hexo c #清理一下
hexo g #生成
hexo d #部署到远程Github仓库 部署在本地就可以忽略

• 根据不同主题的配置方法进行个性化设置

推荐两个主题

​ Next: 下载 教程

​ Fluid: 下载 教程

发博客

官方文档：https://hexo.io/zh-cn/docs/front-matter

编辑好的文章直接复制进入blog/source/_posts即可添加一篇文章，但是需要执行hexo g才能刷新显示出来。

写的文章在发布之前最好在首部加上以下信息：

---
layout: 页面布局（配合主题文档使用）
title: 文章名称
date: 文章日期
comments: 文章是否开启评论
photos: 文章封面图（仅部分主题支持）
tags: 
	- 文章标签一
	- 文章标签二
categories: 文章分类
description: 文章描述，即要在首页显示的摘要（仅部分主题支持）
---

关于摘要：description 和 方式显示摘要二选一即可，部分主题不支持description，每个配置英文冒号后面要空一格，不同主题配置有所差异，具体要参考主题文档

使用Hexo Admin 管理博客

• 首先 npm install hexo-admin --save

• 然后打开 http://localhost:4000/admin，接下来配置密码。

• 打开hexo-admin界面，点击导航的“settings”选项，输入内容后下滑，找到生成的代码，复制到_config.yml中

• 重启hexo，打开hexo-admin的界面，输入密码即可安全使用。

Markdown图片问题

众所周知markdown是纯文本文件，内部不能附加图片的源码。想要显示图片就只能以链接的形式给出。

存储在本地的图片 想要转换成存储在网络上的图片，并且能够以直链访问就要使用到图床。

推荐 typora+picgo+gitee实现图床，体验很不错，网上有详细的教程，这里就不展开说了。