手把手教你搭建GitHub个人博客网站(下)

简介: 手把手教你搭建GitHub个人博客网站(下)

4 写博客

4.1 新建博客

定位到我们的hexo根目录,执行命令:

image.png

hexo会帮我们在_posts下生成相关md文件:

我们只需要打开这个文件就可以开始写博客了,默认生成如下内容:

image.png

当然你也可以直接自己新建md文件,用这个命令的好处是帮我们自动生成了时间。

一般完整格式如下:

---
title: postName #文章页面上的显示名称,一般是中文
date: 2019-07-11 19:11:33 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---
正文

那么hexo new page 'postName'命令和hexo new 'postName'有什么区别呢?

image.png

最终部署时生成一个index.html,但是它不会作为文章出现在博文目录

image.png

4.2 撰写工具

可以用typora来进行博客的编写或者用CSDN的编辑器也是很不错的选择,用VScode的Markdown-toc插件来为我们的文章自动生成目录。

5 优雅地使用Hexo的next主题

5.1 安装

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

image.png

5.2 启用

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开站点配置文件, 找到 theme 字段,并将其值更改为 next。

5.3 验证主题

首先启动 Hexo 本地站点,并开启调试模式(即加上 --debug)

hexo s --debug

在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:


INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

5.4 配置

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。


为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。

你可以访问 Hexo 的文档 了解如何安装 Hexo病进行 站点配置文件的配置

简单的设置可以参考:

NEXT中文文档

NEXT主题详细配置


参考

目录
相关文章
|
7月前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
305 3
|
7月前
|
程序员 SEO
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
230 2
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
|
4月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
130 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
6月前
|
存储 前端开发 对象存储
基于jsDelivr+Github给网站如何换个漂亮的字体。
本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。
71 2
|
7月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
183 0
|
7月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
JavaScript 开发工具 git
保姆级教程:从零构建GitHub Pages静态网站(下)
保姆级教程:从零构建GitHub Pages静态网站(下)
350 0
|
前端开发 JavaScript
保姆级教程:从零构建GitHub Pages静态网站(上)
保姆级教程:从零构建GitHub Pages静态网站
5033 0
|
7月前
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
96 1
|
资源调度 JavaScript 前端开发
用vuepress2搭建自己的github网站
最近打算自己做一个博客网站记笔记,然后部署到github上,最终选择了vuepress的最新版本v2(使用的是vue3和TypeScript开发,默认使用Vite作为打包工具)
85 0