IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 从零开始快速配置个人博客 -> 正文阅读

[开发工具]从零开始快速配置个人博客

效果图:

74

1、准备一台可以联网的电脑【我以机房电脑为例】

15

2、下载nodeJs【我们去下载12版本的,高版本会伴随一些小问题】

image-20211205131622974

43

44

45

下载成功后,双击进行安装,一直点下一步即可:

17

18

19

20

21

22

23

3、然后打开控制台安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

24

安装hexo

cnpm install hexo-cli -g

image-20211205133912213

4、下载git

26

下载完成后一直点击下一步即可完成安装。

5、我们需要创建一个文件夹用来存放我们的项目

image-20211205135610879

进入这个文件夹,然后鼠标右击选择如下:

28

然后配置你的用户名和邮箱

# 用户名
git config --global user.name "username"
# 设置邮箱
git config --global user.email useremail@qq.com

 
  • 1
  • 2
  • 3
  • 4

29

继续输入hexo init[初始化仓库,稍加等待即可]

30

输入hexo s[启动项目]

31

然后再浏览器输入localhost:4000,成功访问,页面如下

32

6、更换一个漂亮的主题【这里我拿我的进行举例】

git clone https://github.com/ZEROKISEKI/hexo-theme-gal.git themes/gal

 
  • 1

33

然后以此输入以下三个命令

cnpm install hexo-renderer-sass --save

 
  • 1

34

cnpm install hexo-renderer-scss --save

 
  • 1

35

cnpm install hexo-generator-json-content --save

 
  • 1

36

然后记事本打开我们的这个文件

37

在末尾粘贴如下代码

jsonContent:
  dateFormat: MM-DD
  pages:
    title: true
    text: true
    path: true
    date: true
    excerpt: true
    preview: true
  posts:
    title: true
    text: true
    path: true
    date: true
    excerpt: true
    tags: [{
      name: tag.name,
      slug: tag.slug,
      permalink: tag.permalink
    }]
    preview: true

 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

38

修改我们的主题为gal

39

可以设置我们自己的一些信息

40

执行一些必要步骤

# 开启搜索功能
hexo new page "search"
# 配置错误页面
hexo new page "404"

 
  • 1
  • 2
  • 3
  • 4

41

输入hexo s运行一下

42

然后在浏览器查看效果

46

到这里我们已经在本地配置成功了,但是页面上的分类、标签,关于我是缺失的,继续进行完善。

hexo new page"tags"
hexo new page "categories"
hexo new page "about"

 
  • 1
  • 2
  • 3

47

完成后,重新hexo s启动即可

48

然后我们打开这个文件,加入一行即可【为了我们创建博客的时候可以给文章添加分类】

51

7、开始编写博客

hexo new "我的第一次博客"

 
  • 1

49

我们在这个文件夹下面可以找到

50

注意:这里我们可以下载一个typora软件,不然用记事本打开实在太丑,不方便编写。不会下载的看这篇文章

typero下载安装教程

然后打开我的第一次博客进行编辑,编辑完成后Ctrl+s保存即可

52

然后重新启动,进行访问:

image-20211205165357055

点击查看内容:

54

到这里我们的本地配置已经OK了,那怎么样才能被别人访问到呢,接下来我们需要把项目部署到gitee上。

8、部署项目

我们到gitee官网进行注册:

55

创建一个仓库

56

起一个仓库名称,然后点击创建

57

然后复制这个url路径:

58

打开我们的博客目录,找到_config.yml,记事本打开,注意冒号后面有空格,然后ctrl+s保存一下

59

然后输入hexo g

60

再输入以下内容

cnpm install --save hexo-deployer-git

 
  • 1

61

继续进行:

hexo d

 
  • 1

这里会弹出账号和密码,就是我们注册的账号和密码,一定要填写正确。

62

63

64

刷新我们的仓库

65

点击右边的服务,选择Gitee Pages

66

这里我们需要实名认证一下即可,完成后如下,点击启动即可

67

部署成功后,点击我们的网站地址

68

出现以下页面:

69

这是我们的一些资源没有被加载到,解决方法:打开_config.yml配置文件

70

url为刚才生成的网站地址,下面再加一个root,对应/后面的bolg,修改完成后ctrl+s保存。

hexo g
hexo d

 
  • 1
  • 2

71

最后点击更新:

72

然后进行访问:

73

到这里,你的个人博客就搭建成功了。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2021-12-10 11:15:55  更:2021-12-10 11:17:47 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/24 9:30:40-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计