十分钟教你从零开始搭建个人博客(基于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实现图床,体验很不错,网上有详细的教程,这里就不展开说了。

posted @ 2022-07-17 17:57  Cheney822  阅读(333)  评论(0编辑  收藏  举报