【详细教程hexo博客搭建】1、从零开始搭建一个能用的博客

news2024/10/6 20:28:50

1、开始

2.环境与工具准备

本教程主要面对的是Windows用户

  • 操作系统:Windows10
  • Node
  • Git
  • Hexo
  • 文本编辑器(强烈推荐VSCODE)
  • GitHub 帐号
  • 一个域名(强烈推荐买个域名)
  • 云服务器(可选)

image-20221027113923949

3.Node的安装

  1. 打开Node官网,下载和自己系统相配的Node的安装程序,否则会出现安装问题。下载地址:Download | Node.js
    我个人的版本是 12.19.0,目前版本已经更新到19.0.0,按照个人经验,可以选个低一些的版本,可以和我的一样,否则后面会出现各种不兼容的问题!我之前就是安装16的,系统无法识别,如果大家遇到问题建议选个低版本的!历史版本下载页面:Previous Releases | Node.js

    image-20221027173738226

  2. 下载后安装,安装的目录可以使用默认目录【C:/Program Files/nodejs/】,也可以自定义路径。
    这个环境路径切换坑也很多,如果大家C盘空间足够可以直接装C盘,如果想切换其他盘或者把环境遍历切换到自定义路径也可以,具体教程百度(不过坑比较多就是了)!
  3. 安装完成后,检查是否安装成功。在键盘按下win + R键,输入CMD,然后回车,打开CMD窗口,执行node -v命令,看到版本信息,则说明安装成功。
  4. 修改npm源。npm下载各种模块,默认是从国处服务器下载,速度较慢,建议配置成淘宝镜像。打开CMD窗口,运行如下命令:

    SHELL

    1
    
    npm config set registry https://registry.npm.taobao.org
    

4.安装Hexo

  1. Git BASH输入如下命令安装

    SHELL

    1
    
    npm install -g hexo-cli
    
  2. 安装完后输入hexo -v验证是否安装成功。

image-20221027173525181

5.Github注册与创建仓库

  1. 进入官网 GitHub: Let’s build from here · GitHub

    Github注册

  2. 点击右上角的 Sign up(注册)

    Github注册

  3. 填写自己的邮箱、密码、用户名等信息,然后用邮箱验证即可完成。
  4. 注册完成后,点击右上角的+按钮,选择New repository,创建一个<用户名>.github.io的仓库。

image-20221027110619071

  • 仓库的格式必须为:<用户名>.github.io (注意:前缀必须为用户名,不要等后面404了再来为什么!!!)
  • Description:为描述仓库(选填)
  • 勾选 Initialize this repository with a README 初始化一个 README.md 文件
  • 点击 Creat repository 进行创建

image-20221027111641909

6.Git安装

  1. 进入官网:Git - Downloads ,由于官网下载太慢可以通过淘宝的开源镜像下载 网址:CNPM Binaries Mirror ,下载版本更具自己的需求选择即可。

    image-20221027111755697

  2. 下载后傻瓜式安装Git即可,安装的目录可以使用默认目录【C:/Program Files/Git】,也可以自定义路径。

  3. 点击电脑左下角开始即可看见Git Bash

Git Bash

  • Git CMD 是windows 命令行的指令风格
  • Git Bash 是linux系统的指令风格(建议使用)
  • Git GUI是图形化界面(新手学习不建议使用)
  1. 常用命令

    SHELL

    1
    2
    3
    
    git config -l  //查看所有配置
    git config --system --list //查看系统配置
    git config --global --list //查看用户(全局)配置
    
  2. 配置用户名和邮箱

    SHELL

    1
    2
    
    git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"
    
  3. 通过git config -l 检查是否配置成功,至此git安装及配置全部完成。

    image-20221027112049822

7.连接至Github

  1. 执行以下命令生成ssh公钥,此公钥用于你的计算机连接Github

    SHELL

    1
    
    ssh-keygen -t rsa -C "你的邮箱"
    

    之后打开C盘下用户文件夹下的.ssh的文件夹,会看到 id_rsa.pub

    公钥

    用记事本打开上述图片中的公钥(id_rsa.pub),复制里面的内容,然后开始在github中配置ssh密钥。

    记事本打开公钥

  2. 将 SSH KEY 配置到 GitHub
    进入github,点击右上角头像 选择settings,进入设置页后选择 SSH and GPG keys,名字随便起,公钥填到Key那一栏。

    image-20221027112347632

    image-20221027112416710

    image-20221027112657256

  3. 测试连接,输入以下命令

    SHELL

    1
    
    ssh -T git@github.com
    

    image-20221027112918539

    出现连接到账户的信息,说明已经大功告成,至此完成了环境准备工作。

8.初始化 Hexo 项目

  1. 在目标路径(我这里选的路径为【C:/Hexo-Blog】)打开cmd命令窗口,执行hexo init初始化项目。

    SHELL

    1
    
    hexo init blog-demo(项目名)
    

    image-20221027113206776

  2. 进入blog-demo ,输入npm i安装相关依赖。

    SHELL

    1
    2
    
    cd blog-demo  //进入blog-demo文件夹
    npm i
    

    image-20221027113331624

  3. 初始化项目后,blog-demo有如下结构:

image-20221027113438707

【node_modules】:依赖包
【scaffolds】:生成文章的一些模板
【source】:用来存放你的文章
【themes】:主题
【.npmignore】:发布时忽略的文件(可忽略)
【_config.landscape.yml】:主题的配置文件
【config.yml】:博客的配置文件
【package.json】:项目名称、描述、版本、运行和开发等信息

  1. 输入hexo server或者hexo s 启动项目

    image-20221027113534970

  2. 打开浏览器,输入地址:http://localhost:4000/ ,看到下面的效果,说明你的博客已经构建成功了。

    博客首页

9. 将静态博客挂载到 GitHub Pages

  1. 安装 hexo-deployer-git

    SHELL

    1
    
    npm install hexo-deployer-git --save
    
  2. 修改 _config.yml 文件
    在blog-demo目录下的_config.yml,就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
    修改最后一行的配置,将repository修改为你自己的github项目地址即可,还有分支要改为main代表主分支(注意缩进)。

    YAML

    1
    2
    3
    4
    
    deploy:
      type: git
      repository: git@github.com:Fomalhaut-Blog/Fomalhaut-Blog.github.io.git
      branch: main
    
  3. 修改好配置后,运行如下命令,将代码部署到 GitHub(Hexo三连)。

    SHELL

    1
    2
    
    hexo clean && hexo generate && hexo deploy  // Git BASH终端
    hexo clean; hexo generate; hexo deploy  // VSCODE终端
    
    • hexo clean:删除之前生成的文件,若未生成过静态文件,可忽略此命令。

    • hexo generate:生成静态文章,可以用hexo g缩写

    • hexo deploy:部署文章,可以用hexo d缩写

      image-20221027113704801

      注意:deploy时可能要你输入 username 和 password。

      如果出现Deploy done,则说明部署成功了。

      image-20221027113756069

      稍等两分钟,打开浏览器访问:https://Fomalhaut-Blog.github.io ,这时候我们就可以看到博客内容了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vivo数据中心网络链路质量监测的探索实践

作者&#xff1a;vivo 互联网服务器团队- Wang Shimin 网络质量监测中心是一个用于数据中心网络延迟测量和分析的大型系统。通过部署在服务器上的Agent发起5次ICMP Ping以获取端到端之间的网络延迟和丢包率并推送到存储与分析模块进行聚合和分析与存储。控制器负责分发PingList…

【大数据】Neo4j 图数据库使用详解

目录 一、图数据库介绍 1.1 什么是图数据库 1.2 为什么需要图数据库 1.3 图数据库应用领域 二、图数据库Neo4j简介 2.1 Neo4j特性 2.2 Neo4j优点 三、Neo4j数据模型 3.1 图论基础 3.2 属性图模型 3.3 Neo4j的构建元素 3.3.1 节点 3.3.2 属性 3.3.3 关系 3.3.4 标…

JS生成器的介绍

1、 什么是生成器 生成器是ES6中新增的一种函数控制、使用的方案&#xff0c;它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。 平时我们会编写很多的函数&#xff0c;这些函数终止的条件通常是返回值或者发生了异常。 生成器函数也是一个函数&#xff0c;但是…

阿里云无影云电脑是干什么用的?五大使用场景

阿里云无影云电脑是一种易用、安全、高效的云上桌面服务&#xff0c;阿里云无影云电脑可用于高数据安全管控、高性能计算等要求的金融、设计、视频、教育等领域&#xff0c;适用于多种办公场景&#xff0c;如远程办公、多分支机构、安全OA、短期使用、专业制图等。阿里云百科来…

【LeetCode热题100】--49.字母异位词分组

49.字母异位词分组 两个字符串互为字母异位词&#xff0c;当且仅当两个字符串包含的字母相同。同一组字母异位词中的字符串具备相同点&#xff0c;可以使用相同点作为一组字母异位词的标志&#xff0c;使用哈希表存储每一组字母异位词&#xff0c;哈希表的键为一组字母异位词的…

DockerCompose

DockerCompose Docker Compose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器&#xff01; 初识DockerCompose Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。格式如下&#xff1a; version: &…

[golang 流媒体在线直播系统] 4.真实RTMP推流摄像头把摄像头拍摄的信息发送到腾讯云流媒体服务器实现直播

用RTMP推流摄像头把摄像头拍摄的信息发送到腾讯云流媒体服务器实现直播,该功能适用范围广,比如:幼儿园直播、农场视频直播, 一.准备工作 要实现上面的功能,需要准备如下设备: 推流摄像机&#xff08;监控&#xff09; 流媒体直播服务器(腾讯云流媒体服务器,自己搭建的流媒体服务…

React中组件通信01——props

React中组件通信01——props 1. 父传子——props1.1 简单例子——props1.2 props 可以传递任何数据1.2.1 传递数字、对象等1.2.2 传递函数1.2.3 传递模版jsx 2. 子传父 子传子——props2.1 父传子——传递函数2.2 子传父——通过父传子的函数实现2.3 优化 子传子&#xff08;…

uniapp开发小程序中实现骨架屏

第一步&#xff1a;小程序中实现骨架屏在微信开发者工具中点击生成骨架屏&#xff1a; 第二步&#xff1a;复制html代码&#xff0c;到骨架屏vue组件汇中再把之前写的样式代码引入进去&#xff1a; import ../../pages/user/user.css; 第三步&#xff1a;组件中引入骨架屏&am…

python pytesseract 中文文字批量识别

用pytesseract 来批量把图片转成文字 1、安装好 pytesseract 包 2、下载安装OCR https://download.csdn.net/download/m0_37622302/88348824https://download.csdn.net/download/m0_37622302/88348824 Index of /tesseracthttps://digi.bib.uni-mannheim.de/tesseract/ 我是…

百度SEO优化TDK介绍(分析下降原因并总结百度优化SEO策略)

TDK是SEO优化中很重要的部分&#xff0c;包括标题&#xff08;Title&#xff09;、描述&#xff08;Description&#xff09;和关键词&#xff08;Keyword&#xff09;&#xff0c;为百度提供网页内容信息。其中标题是最重要的&#xff0c;应尽量突出关键词&#xff0c;同时描述…

【C++学习】继承

目录 一、继承的概念及定义 1、继承的概念 2、继承的定义 2.1 定义格式 2.2 继承关系和访问限定符 2.3 继承基类成员访问方式的变化 二、基类和派生类对象赋值转换 三、继承中的作用域 四、派生类的默认成员函数 五、继承与友元 六、继承与静态成员 七、复杂的菱形…

天然气跟踪监管系统功能模块实现

天然气跟踪监管系统功能模块实现 1. 数据库查询3. 仓库管理&#xff08;1&#xff09;仓库查询与展示。代码说明 1. 数据库查询 救援物资跟踪监管系统的绝大部分功能都会涉及关系数据库中的业务数据&#xff0c;因此关系数据库的查询是本系统不可或缺的重要部分。 本系统中的数…

Matlab--微积分问题的计算机求解

目录 1.单变量函数的极限问题 1.1.公式例子 1.2.对应例题 1 2.多变量函数的极限问题 3.函数导数的解析解 4.多元函数的偏导数 5.Jacobian函数 6.Hessian矩阵 7.隐函数的偏导 8.不定积分问题的求解 9.定积分的求解问题 10. 多重积分的问题求解 1.单变量函数的极限问题 …

【Vue】快速入门案例与工作流程的讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Vue快速入门》。&#x1f…

运维Shell牛刀小试(十一):for循环读取多个命令行参数|read重定向读取文件内容

运维Shell脚本小试牛刀(一) 运维Shell脚本小试牛刀(二) 运维Shell脚本小试牛刀(三)::$(cd $(dirname $0)&#xff1b; pwd)命令详解 运维Shell脚本小试牛刀(四): 多层嵌套if...elif...elif....else fi_蜗牛杨哥的博客-CSDN博客 Cenos7安装小火车程序动画 运维Shell脚本小试…

【系统架构】系统架构设计基础知识

导读&#xff1a;本文整理关于系统架构设计基础知识来构建系统架构知识体系。完整和扎实的系统架构知识体系是作为架构设计的理论支撑&#xff0c;基于大量项目实践经验基础上&#xff0c;不断加深理论体系的理解&#xff0c;从而能够创造新解决系统相关问题。 目录 1、软件架…

高速信号处理板资料保存:383-基于kintex UltraScale XCKU060的双路QSFP+光纤PCIe 卡设计原理图

基于kintex UltraScale XCKU060的双路QSFP光纤PCIe 卡 一、板卡概述 本板卡系我司自主研发&#xff0c;基于Xilinx UltraScale Kintex系列FPGA XCKU060-FFVA1156-2-I架构&#xff0c;支持PCIE Gen3 x8模式的高速信号处理板卡&#xff0c;搭配两路40G QSFP接口&#xf…

PyQt5入门2——添加一个画布并且显示特定的图片

PyQt5入门2——添加一个画布并且显示特定的图片 学习前言使用到的PyQt5类实例使用1、窗口构建a、构建基础类b、读取已有的图片并且显示 2、主程序运行 全部代码 学习前言 搞搞可视化界面哈&#xff0c;虽然不一定有用&#xff0c;但是搞一下。 使用到的PyQt5类 创建画布需要…

MapReduce YARN 的部署

1、部署说明 Hadoop HDFS分布式文件系统&#xff0c;我们会启动&#xff1a; NameNode进程作为管理节点DataNode进程作为工作节点SecondaryNamenode作为辅助 同理&#xff0c;Hadoop YARN分布式资源调度&#xff0c;会启动&#xff1a;ResourceManager进程作为管理节点NodeM…