从零开始快速配置个人博客

这篇具有很好参考价值的文章主要介绍了从零开始快速配置个人博客。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

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

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

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

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

从零开始快速配置个人博客

安装hexo

cnpm install hexo-cli -g

从零开始快速配置个人博客

4、下载git

从零开始快速配置个人博客

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

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

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

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

 
 
  • 1
  • 2
  • 3
  • 4

从零开始快速配置个人博客

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

从零开始快速配置个人博客

输入hexo s[启动项目]

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

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

 
 
  • 1

从零开始快速配置个人博客

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

cnpm install hexo-renderer-sass --save

 
 
  • 1

从零开始快速配置个人博客

cnpm install hexo-renderer-scss --save

 
 
  • 1

从零开始快速配置个人博客

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

 
 
  • 1

从零开始快速配置个人博客

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

从零开始快速配置个人博客

在末尾粘贴如下代码

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

从零开始快速配置个人博客

修改我们的主题为gal

从零开始快速配置个人博客

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

从零开始快速配置个人博客

执行一些必要步骤

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

 
 
  • 1
  • 2
  • 3
  • 4

从零开始快速配置个人博客

输入hexo s运行一下

从零开始快速配置个人博客

然后在浏览器查看效果

从零开始快速配置个人博客

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

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

 
 
  • 1
  • 2
  • 3

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

从零开始快速配置个人博客

7、开始编写博客

hexo new "我的第一次博客"

 
 
  • 1

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

typero下载安装教程

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

从零开始快速配置个人博客

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

从零开始快速配置个人博客

点击查看内容:

从零开始快速配置个人博客

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

8、部署项目

我们到gitee官网进行注册:

从零开始快速配置个人博客

创建一个仓库

从零开始快速配置个人博客

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

从零开始快速配置个人博客

然后复制这个url路径:

从零开始快速配置个人博客

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

从零开始快速配置个人博客

然后输入hexo g

从零开始快速配置个人博客

再输入以下内容

cnpm install --save hexo-deployer-git

 
 
  • 1

从零开始快速配置个人博客

继续进行:

hexo d

 
 
  • 1

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

从零开始快速配置个人博客

从零开始快速配置个人博客

从零开始快速配置个人博客

刷新我们的仓库

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

从零开始快速配置个人博客

出现以下页面:

从零开始快速配置个人博客

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

从零开始快速配置个人博客

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

hexo g
hexo d

 
 
  • 1
  • 2

从零开始快速配置个人博客

最后点击更新:

从零开始快速配置个人博客

然后进行访问:

从零开始快速配置个人博客

到这里,你的个人博客就搭建成功了。文章来源地址https://www.toymoban.com/news/detail-413232.html

到了这里,关于从零开始快速配置个人博客的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 利用ArcGIS Pro制作三维效果图

    1、新建工程 打开Arcgispro,新建工程,这里我们要用到的模板为全局场景。 这里添加的数据需要有一个字段内容是数值的,这个字段也是接下来要进行拉伸的字段。 3、高度拉伸 数据添加进来后,如下图所示,这时图层处于2D图层里。 这时我们点中该图层,回到菜单栏,点击

    2024年02月16日
    浏览(11)
  • AIGC 360全景图 效果图材质替换

    首先感叹一下AIGC的效果,如下图所示 AUTOMATIC1111 WebUI Prompts Positive and Negative提示词 LoRa 插件 LoRa: LatentLabs360 on CivitAI ControlNet 插件 Deep-checkpoints模型文件地址 Lora-Script 训练脚本 Panorama-Viewer查看全景图插件 网络问题自己搭梯子,一些安装环境可以调整(gradio==3.16.2) 感谢 秋葉

    2024年02月09日
    浏览(13)
  • 数据可视化:随时间变化的效果图

    获取北京、上海、江苏、广东四省的2008—2012年的GDP数据 在Jupyter Notebook上实现代码如下:

    2023年04月12日
    浏览(10)
  • 炫云云渲染3ds max效果图渲染教程

    很多人在第一次使用炫云云渲染渲染效果图的时候不知道怎么使用,其实现在使用炫云渲染效果图真的很简单,我们一起来看看。 一客户端安装 1、打开炫云云渲染官网,点击右上角的客户端下载,选择炫云客户端(NEXT版),进入下载页面下载客户端。 2、客户端下载下来后

    2024年02月07日
    浏览(11)
  • 3d效果图的应用场景和3d渲染的发展前景

    3D效果图一直都是视觉行业非常重要的一部分,它在不同领域都有广泛应用,通过效果图,设计师能够准确展示设计方案,方便沟通。本文将深入分析3D效果图在不同场景中的应用和未来发展趋势。 1、建筑领域 在建筑领域中,3D效果图被用于房屋、商场和酒店等的设计,通过

    2024年01月23日
    浏览(17)
  • uniapp图片放大缩小预览,并支持图片拖动附效果图

    效果图: 放大缩小和拖动是根据 movable-area 组件来实现的,小程序和uniapp都支持这个组件。 movable-area | 微信开放文档 微信开发者平台文档 https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html 实现思路: 默认显示默认大小的图片,点击图片执行yulan事件从而显示放大缩

    2024年02月11日
    浏览(10)
  • 微信小程序实现输入车牌号码的功能(附效果图)

    实现用户输入车牌的功能 可以输入 正常车牌以及新能源车牌 1 . wxml 文件

    2024年02月11日
    浏览(11)
  • 运用pyecharts制作可视化大屏(代码展示及效果图-动图)

    一、Matplotlib绘图 折线图 import matplotlib.pyplot as plt # 调用画图库 plt.rcParams[\\\'font.sans-serif\\\'] = [\\\'SimHei\\\'] # 设置成可以显示中文,字体为黑体 plt.figure( figsize =(12,8)) # 调整图片尺寸 x = [\\\'周一\\\',\\\'周二\\\',\\\'周三\\\',\\\'周四\\\',\\\'周五\\\',\\\'周六\\\',\\\'周日\\\'] # 设置x轴数据 y = [401,632,453,894,775,646,1207] # 设置对应

    2024年02月05日
    浏览(13)
  • echarts看板效果图:流光折线图、3d柱状图、3d饼图、3d地图

    现在展厅的大看板是越花里胡哨越好,不过真的挺难做的。好在可以百度找到一些大神的作品进行参考。 下面的内容都是基于 echarts 5.3.3 和 vue3 。另外demo都是参考别人的案例。 效果图 代码 本质上是两条线组合在一起的,一条是静态的线条,一条是动态的线条。相关属性都

    2024年02月06日
    浏览(15)
  • 【ArcGIS Pro微课1000例】0029:绘制全球海洋波纹荡漾效果图

    本文讲解ArcGIS Pro3.0中,基于全球航洋面状矢量数据,绘制震撼全球海洋波纹荡漾效果图。 绘制好的海水波纹荡漾效果图如下: 下面我们来学习绘制过程。 波纹荡漾效果需要在全局或者局部场景中制作。打开软件,点击新建地图→新建全局场景。 全局场景: 加载配套案例数

    2024年02月15日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包