博客搭建(hexo+github)

简介

搭建完成网站的如下所示
https://polarday.top/

使用github托管博客,完全免费不需要购买服务器
博客框架:hexo
hexo主题:ICARUS
图床:github+PicGo
编辑:vscode

为什么使用hexo框架?因为hexo是静态框架,我们使用github托管博客的页面只能使用静态的框架,不支持像wordpress等需要请求数据库的动态框架,这类框架必须具有自己的服务器

搭建步骤

  1. 搭建hexo框架发布到github
  2. 更换ICARUS主题
  3. 配置vscode的markdown环境
  4. 连接图床

搭建hexo框架发布到github

先安装node.js和git
参考教程
hexo官方文档

1.github创建个人仓库

点击GitHub中的New repository创建新仓库,仓库名应该为:用户名.github.io这个用户名使用你的GitHub帐号名称代替,这是固定写法,比如我的仓库名为:

2.安装hexo

Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog,进入文件夹中,使用npm命令安装Hexo,输入:
npm install -g hexo-cli
安装完成后,初始化我们的博客,输入:
hexo init blog
初始化完成后进入blog目录,输入以下三条命令检测网站是否安装成功:

  • 生成一篇文章
    hexo new test_my_site
  • 生成静态文件
    hexo g
  • 启动服务器,默认情况下,访问网址为: http://localhost:4000/
    hexo s

3.本地静态文件推送到github

上面只是在本地预览,接下来要做的就是就是推送网站,可以通过github的域名访问
blog目录下的_config.yml是网站的配置信息,包括网站标题等自定义内容可以参考hexo官方文档设置,在本地都调试完成后将其推送到github,在_config.yml的最后有deploy的配置,修改为如下配置,其中repo是你之前创建的仓库的路径

deploy:
  type: git
  repo: https://github.com/shnpd/shnpd.github.io.git
  branch: main

执行命令,就可以一键部署,具体命令细节可以参考hexo官方文档
hexo clean
hexo g
hexo d

然后访问shnpd.github.io就可以看到我们的博客了
组成我们网站的文件是blog目录下的public目录,执行clean命令会清楚public目录,执行generate命令会生成public目录,部署命令也是将public目录部署到github上

4.域名绑定(可选)

绑定域名是可选的,我们使用shnpd.github.io本身就可以访问博客了,如果有同学想绑定自己的域名可以参考本节

首先需要购买自己的域名,购买的途径有很多,像腾讯云、阿里云都可以,我使用的是腾讯云

在腾讯云控制台域名解析中添加两条记录

登录github之前创建的仓库,settings-pages-custom domain填入自己的域名,点击save保存

进入blog的source目录下新建txt,输入你的域名。如果带有www,那么以后访问的时候必须带有www完整的域名才可以访问,但如果不带有www,以后访问的时候带不带www都可以访问。所以建议不要带有www。保存命名为CNAME,无后缀名。

域名绑定完成,这里因为是基于github搭建的所以不需要对域名进行备案

更换hexo主题

hexo的主题有很多,我们这里使用的是icarus
hexo-theme-icarus
官方文档

1.主题安装

在blog目录下执行如下命令:
npm install -S hexo-theme-icarus hexo-renderer-inferno

在网站配置_config.yml文件中启用icarus主题:
theme: icarus
或使用hexo命令修改主题为Icarus
hexo config theme icarus

启动本次服务器测试是否成功:
hexo server

2.主题配置

icarus的具体主题配置都可以参考官方文档,细节配置可以参考文档自行定义,下面主要介绍几个关键的地方

图片
我们在设置网站的logo或其他配置时可能会用到图片,这里图片的路径为/img/xxx.jpg,这是相对路径,相对blog目录的路径为:/node_modules/hexo-theme-icarus/source/img/xxx.jpg

About页面
about页面在初始化的时候是没有的,需要我们自己创建,创建命令为:
hexo new page about

需要执行以下命令重新生成静态文件

hexo clean
hexo g

创建其他页面时也按照这个步骤,新建的页面在source目录下

写文章
新建文章使用hexo new "第一篇文章"命令,就可以在source/_posts目录下创建文章的markdown文件直接编辑即可
文章分类和标签的设置参考hexo官方文档Front-matter
文章在首页默认会显示全部内容,需要在文章中添加<!-- more -->标签。 标签前面的文章内容会被标记为摘要,而其后的内容不会显示在文章列表上。

配置vscode markdown环境(可选 推荐)

这里因为我们需要编辑markdown来写文章,这里我们推荐使用vscode,通过vscode打开blog目录,可以方便的查看目录结构,同时也可以直接在vscode中开启终端执行相关命令,使用vscode编写markdown非常方便,具体配置教程有很多,这里主要就是安装几个插件

  • Markdown All in One (基本语法)
  • Markdown Preview Enhanced(预览)
  • markdownlint(语法检查)

安装完成后就可以直接编写markdown了

配置图床(可选 推荐)

我们文章中会存在大量的图片,直接将图片保存在网站的文件中会相当的臃肿,所以我们推荐使用图床将图片保存在其他位置并生成外链,在我们的文章中通过外链来引用图片即可。

可以用来充当图床的服务有很多,包括七牛云、阿里云OSS、腾讯云COS、GitHub等,其中七牛云需要备案域名、阿里云和腾讯云不是完全免费的,我们这里使用的是GitHub,但是GitHub本身存在访问较慢的问题,还是推荐大家使用七牛云、阿里云等费用不是很贵。

1.新建github仓库

新建github仓库作为图床用来保存我们的图片,仓库名字可以随便起我的名字是blog-pic,仓库需要设置为public

2.下载PicGo

PicGo官方文档
PicGo是一个用于快速上传图片并获取图片URL链接的工具,如果使用vscode的话可以直接安装PicGo的扩展,安装完成后配置github图床

配置名:随意起
仓库名:新建仓库的名称
分支名:设置为main即可
Token:需要在github中申请;settings——Developer Settings——Personal access tokens——tokens——Generate new token

vscode的扩展也是相同的配置方法,这里主要说一下vscode中的使用

复制自动生成链接
通过使用Upload image from clipboard就可以从粘贴板上传图片,这里的快捷键我们设置为ctrl+alt+e比较方便,当我们复制了一张图片后,使用该快捷键就可以自动将图片上传并生成链接插入到对应的位置

自定义图片的输出格式
这里定义了前一步插入的格式,考虑到通用性我们设置为html的格式,同时添加了width="50%"默认对每张图片缩放50%

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/518200.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

新手开抖店:选品过后如何有效对接达人?这些方法100%有效!

哈喽~我是电商月月 要说做抖音小店最主要的是什么&#xff1f;那当然是找品了 那出单最快的方法是什么&#xff1f;无疑是达人带货了&#xff01; 但新手店铺没销量&#xff0c;没体验分&#xff0c;没好评怎么能让达人同意帮我们带货呢&#xff1f; 方法其实很简单&#x…

上位机图像处理和嵌入式模块部署(qmacvisual之plc通信)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 传统的非标自动化设备当中&#xff0c;plc发挥了很大的作用。这里面如何对这些电机和机构进行控制&#xff0c;大多数场景下用的就是plc设备了。目…

常用的AI绘画自动生成器介绍

AI绘画自动生成器是一种利用人工智能技术生成图像的工具。它可以根据用户输入的文本描述自动生成相应的图像。目前,有几种流行的AI绘画自动生成器,包括: 1. **DALL-E 2** DALL-E 2是由OpenAI开发的AI绘画生成器,它可以根据用户输入的自然语言描述生成高质量的图像。DALL-E 2使…

上位机图像处理和嵌入式模块部署(qmacvisual之tcp服务器端)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 上面一篇&#xff0c;我们谈到了tcp客户端&#xff0c;另外一种连接方法就是tcp服务器端。事实上&#xff0c;对于第三方系统&#xff0c;大多数情…

解析Apache Kafka:在大数据体系中的基本概念和核心组件

关联阅读博客文章&#xff1a;探讨在大数据体系中API的通信机制与工作原理 关联阅读博客文章&#xff1a;深入解析大数据体系中的ETL工作原理及常见组件 关联阅读博客文章&#xff1a;深度剖析&#xff1a;计算机集群在大数据体系中的关键角色和技术要点 关联阅读博客文章&a…

账号和权限管理

一、账号 1.用户的类型 1.超级管理&#xff1a;权限最高的用户 2.普通用户&#xff1a;权限受到限制的用户 3.程序用户&#xff1a;不是给人登录使用的&#xff0c;给程序使用的&#xff0c;这些用户一般不允许登录到系统&#xff0c;一般是为了支持程序运行(超级管理员和普…

C语言中的结构体:揭秘数据的魔法盒

前言 在C语言的广阔天地中&#xff0c;结构体无疑是一颗璀璨的明珠。它就像是一个魔法盒&#xff0c;能够容纳各种不同类型的数据&#xff0c;并按我们的意愿进行组合和排列。那么&#xff0c;这个魔法盒究竟有何神奇之处呢&#xff1f;让我们一探究竟。 一、结构体的诞生&…

SV学习笔记(七)

类型转换 写在前面 类型转换可以分为 静态转换和动态转换 。静态转换即需要在转换的表达式前 加上单引号 即可&#xff0c;该方式并不会对转换值做检查。如果发生转换失败&#xff0c;我们也无从得知。动态转换即需要使用 系统函数$cast(tgt&#xff0c; src) 做转换。静态转…

光猫桥接模式详细步骤

目录 一、前言 路由模式 &#xff08;宽带默认&#xff09; 桥接模式 二、桥接模式步骤 &#xff08;一&#xff09;图片记录备份 设备信息图 网络侧信息 远程管理密码 宽带上网设置 &#xff08;二&#xff09;桥接模式开始 光猫设置 路由器设置 一、前言 重点&a…

【学习笔记】java项目—苍穹外卖day10

文章目录 苍穹外卖-day10课程内容1. Spring Task1.1 介绍1.2 cron表达式1.3 入门案例1.3.1 Spring Task使用步骤1.3.2 代码开发1.3.3 功能测试 2.订单状态定时处理2.1 需求分析2.2 代码开发2.3 功能测试 3. WebSocket3.1 介绍3.2 入门案例3.2.1 案例分析3.2.2 代码开发3.2.3 功…

【python从入门到精通】-- 第四战:语句汇总

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;python从入门到精通&#xff0c;魔法指针&#xff0c;进阶C&#xff0c;C语言&#xff0c;C语言题集&#xff0c;C语言实现游戏&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文…

Python人工智能应用----文本情感分析

1.问题引入 接着前两节课的内容&#xff0c;今天我们要构建一个人工智能系统。 它的目的是像人类一样&#xff0c;区分评价的情感是正面还是负面的。 接下来&#xff0c;我们要对提取的文本进行感情色彩的分析&#xff0c;这个就是文本情感分析&#xff0c;我们要使用机器学习…

RecyclerView 与 ListView(一):使用

RecyclerView 与 ListView 功能对比 对比项AbsListViewRecyclerView定向刷新不支持支持局部刷新不支持支持刷新动画不支持支持Item点击支持不支持分隔线样式单一自定义样式布局方式列表/网格自定义样式头尾添加支持不支持 Adapter Adapter&#xff1a;1.创建View 2.绑定数据…

理解Three.js的相机

大家都知道我们生活中的相机&#xff0c;可以留下美好瞬间。那Three.js的相机是什么呢&#xff1f;Three.js创建的场景是三维的&#xff0c;而我们使用的显示器显然是二维的&#xff0c;相机就是抽象的定义了三维空间到二维显示器的投影方式。Three.js常见的相机有两类&#xf…

(React组件基础)前端八股文修炼Day6

一 类组件与函数组件有什么异同 在React中&#xff0c;类组件和函数组件是创建组件的两种主要方式。随着React的发展&#xff0c;尤其是自Hooks在React 16.8中引入以来&#xff0c;函数组件的功能变得更加强大&#xff0c;使得它们能够更加方便地与类组件相竞争。下面是类组件…

Apache Paimon实时数据糊介绍

Apache Paimon 是一种湖格式,可以使用 Flink 和 Spark 构建实时 数据糊 架构,用于流式和批处理操作。Paimon 创新地将湖格式和 LSM(日志结构合并树)结构相结合,将实时流式更新引入湖架构中。 Paimon 提供以下核心功能: 实时更新: 主键表支持大规模更新的写入,具有非常…

helm安装chart报unclosed action

我在尝试使用helm安装mysql主从集群&#xff0c;使用bitnami/mysql的官方chart&#xff0c;但是执行helm install mysql-cluster mysql -n mysql-cluster报如下错误&#xff1a; Error: parse error at (mysql/charts/common/templates/_labels.tpl:14): unclosed action 百度…

C++ 类(初篇)

类的引入 C语言中&#xff0c;结构体中只能定义变量&#xff0c;在C中&#xff0c;结构体内不仅可以定义变量&#xff0c;也可以定义函数。 而为了区分C和C我们将结构体重新命名成class去定义 类的定义 标准格式&#xff1a; class className {// 类体&#xff1a;由成员函…

css酷炫边框

边框一 .leftClass {background: #000;/* -webkit-animation: twinkling 1s infinite ease-in-out; 1秒钟的开始结束都慢的无限次动画 */ } .leftClass::before {content: "";width: 104%;height: 102%;border-radius: 8px;background-image: linear-gradient(var(…

“双碳”目标下资源环境中的可计算一般均衡(CGE)模型应用

我国政府承诺在2030年实现“碳达峰”&#xff0c;2060年实现“碳中和”&#xff0c;这就是“双碳”目标。为了实现这一目标就必须应用各种二氧化碳排放量很高技术的替代技术&#xff0c;不仅需要考虑技术上的可靠性&#xff0c;也需要考虑经济上的可行性。可计算一般均衡模型&a…