使用hexo搭建一个博客超详细步骤

一.前期准备

Hexo使用前提
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。使用Hexo的前提是电脑上已安装下列程序：
安装Hexo
在vscode建立一个文件夹(例如0808prac)，右键打开终端，输入以下终端命令：
全局安装hexo：npm install -g hexo-cli （或者npm i -g hexo-cli）
查看是否安装成功：hexo -v
安装成功显示如下图：

二.写博客

创建项目：hexo init 文件名 （例如hexo init my-blog）
进入创建好的项目：cd 文件名 （例如cd my-blog）
安装依赖：npm inistall (或者npm i)
生成的文件如下：关于文件的描述说明在Hexo官网有详细说明，在这里就不赘述了
修改博客根目录中_config.yml文件的配置项post_asset_folder为true(方便后面图片的显示)
创建一篇新文章或者新的页面：hexo new 名字 (例如hexo new 我的日志)
生成一个我的日志.md文档和一个我的日志文件夹

我的日志.md文件如下图：
在我的日志.md文件中写入文本
Hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs，因此你不仅可以用 Markdown 写作，你还可以用 EJS 写作，如下使用Markdown语法写作：

写入文本效果如下：
在我的日志.md文件中加入图片
博客根目录中下安装插件：

**npm install https://github.com/CodeFalling/hexo-asset-image --save**

把要引入的图片放在我的日志文件夹下

Markdown语法引入图片

还可以根据Markdown语法引入更多内容
例如我在这里又接着引入了标题和js

在本地启动项目：hexo s (在localhost:4000运行)
效果如下图：

三.生成外网可以访问的博客

到此时为止，这个博客只能在你自己的电脑上访问，接下来该怎么办呢？

Ctrl+c暂停项目
生成项目：hexo g
会生成一个public文件夹，如下图：
进入public文件夹：cd public
在public文件夹终端下执行一系列git命令，提交到自己的GitHub仓库
借助第三方网站netlify网站，这是一个免费的可以发布静态网页的网站
打开这个网站，进行登录，登录时授权给GitHub，用自己的GitHub账号登录这个网站
登录之后，点击右上角New sit from Git创建一个新的站点
选择GitHub
进去之后搜索自己刚才提交的仓库，选择这个项目，不需要其他操作，直接点击最下面Deploy site发布
发布之后会帮我们生成一个随机的域名
上图中绿色网址就是我们的博客网址，谁都可以访问
修改域名
如果觉得这个随机生成的域名太随意了，可以自己改一个域名：
点击上图中Site setting→Change site name修改域名
自己想改什么随意，比如我给它改为orange-blog
修改之后，就生成了一个自定义域名，这个网址谁都可以访问

四.解决Hexo博客不显示图片的一种方法

在上述内容中穿插了解决Hexo博客不显示图片的一种方法，在这里单拎出来

引入图片踩坑
一开始我没有修改配置文件，也没有安装加载图片的插件，直接使用Markdown语法引入文件，结果就是文件出不来。
解决Hexo博客不显示图片的一种方法

修改配置
博客根目录中_config.yml文件的配置项post_asset_folder为true

post_asset_folder:true

完成此设置后，当你通过hexo new 文件名新建博客后，会产生一个和文件同名的文件夹
在博客根目录中下使用npm安装插件

npm install https://github.com/CodeFalling/hexo-asset-image --save

把要引入的图片放在我的日志文件夹下
Markdown语法引入图片
在本地启动项目：hexo s (在localhost:4000运行)
图片即可显示，效果如下图：

最后大家如果想了解更多功能，自己写出更炫酷的博客，可以查看hexo官网。

使用hexo搭建一个博客超详细步骤相关推荐

Github + Hexo 搭建个人博客超详细教程
Github + Hexo 搭建个人博客超详细教程本文目录 generated with DocToc 网站搭建本文目录 1.安装node.js 2.添加国内镜像 3.安装Git 4.注册Gith ...
GitHub+hexo搭建个人博客（2019新版超详细教程）
GitHub+hexo搭建个人博客详细教程原文链接 : GitHub+hexo搭建个人博客详细教程前言随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交信息分享者,随之优秀的信息分享平台也越来 ...
Github + Hexo 搭建个人博客
文章目录 Github + Hexo 搭建个人博客快速搭建安装Node.js 添加国内镜像源安装 Git 注册 Github 安装Hexo 连接Github与本地写文章.发布文章图片添加水印 ...
利用Hexo搭建个人博客－博客初始化篇
上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境. 相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面, ...
github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
使用Hexo搭建个人博客的终极资料
# 一.前言 Hexo 是一个基于 NodeJs 博客框架,可以快速的帮我们搭建一个博客系统,Hexo使用的是Markdown(下文简称MD)解析文章的,在几秒内即可利用靓丽的主体生成静态网页. 推荐 ...
hexo搭建个人博客_hexo 搭建个人博客
hexo 搭建个人博客 hexo-theme-matery README Hexo BLOG 地址 iyuhp's blog 基本介绍本 blog 使用 HEXO 搭建, MATERY 作为主题, ...
GitHub Pages + Hexo搭建个人博客网站，史上最全教程
文章目录一.准备工作 1. GitHub账号 2. 安装Git 3. 安装NodeJS 二.创建仓库三.安装Hexo 四.更换主题 1. NexT 主题 2. Fluid主题五.创建文章六.个 ...
利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...

使用hexo搭建一个博客超详细步骤

一.前期准备

二.写博客

三.生成外网可以访问的博客

四.解决Hexo博客不显示图片的一种方法

使用hexo搭建一个博客超详细步骤相关推荐

最新文章

热门文章