安装需要的软件
软件安装
我们需要安装nodejs https://nodejs.org/en/、git bash https://www.git-scm.com/download/win、npm、Hexo
其中我们只需要下载前两个就行了

最新版的Nodejs中包含了npm,所以我们不需要额外的安装了

下载完之后无脑点下一步就可以了,哈哈是不是很简单呢?

我们打开Git Bash输入下面命令来检测安装是否成功

node -v和npm -v如果没有问题的话,应该是这样字的。

我们启动cmd,输入以下两条命令,成功后之后通过npm全局安装的包都会存放到node_global文件夹(这个文件夹是我自己创建的,你也可以创建在不同位置)下,后续查找包较方便。

Code
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

这里的路径要记住,接下来可能我们在配置环境变量的时候,还将会用到

检测没问题之后,我们安装最后一个东西hexo
打开Git Bash输入npm install -g hexo
但是如果你会发现Hexo无法使用,我们还需要配置环境变量

配置环境变量
这步,可能会比较的难,你需要跟着我做。

我的电脑右击属性->点高级系统配置->点环境变量->在最上边一栏双击Path->点击新建->然后输入你node_global的路径

开始建博客
准备工作做了这么多了,现在我们终于要开始搭建自己的博客了,进入一个你博客存放的位置,然后在命令行中输入hexo init,这是博客的初始化操作
现在初始化完毕了,我们在命令行中输入hexo s(s是start的意思),然后我们打开浏览器输入网址localhost:4000我们就可以看到自己的博客了,博客如下图所示:

美化博客
简单配置一下博客
博客的配置文件是你博客的根目录的_config.yml文件
然后我们打开文件,进行基本的配置

Code

Site

title:        # 这里写博客的名字
subtitle: ''    # 这里写博客的副标题
description: ''         # 关于你博客的描述
keywords:
author:             # 这里写博客的作者
language: zh-CN         # 博客语言英文en
timezone: ''
简单配置完毕,接来下

我们学一下Hexo的基本命令

Hexo基本命令
命令 作用
Hexo init 初始化博客
Hexo s 运行博客
Hexo n title 创建一篇新的文章,文章标题是title
Hexo c 清理文件
Hexo g 生成静态文件
Hexo d 程部署博客(需要插件)
安装主题并简单配置
主题介绍:一个很漂亮的主题,主题官网点我出发

接下来执行git clone https://github.com/jerryc127/hexo-theme-butterfly themes/butterfly进行安装,这里我们先让他安装着,我们打开我们的配置文件找到这一行theme: landspace然后将landspace替换成我们的主题也就是butterfly

此时运行博客 是运行不了的,因为我们少了一个插件,我们通过命令npm install hexo-renderer-pug hexo-renderer-stylus来安装这个插件
最终完美运行.

为了以后升级方便,这里不推荐直接对主题的配置文件进行修改,而是复制配置文件进行修改。个人推荐把主題的配置文件_config.yml复制到 Hexo 工作目录下的source/_data/butterfly.yml,如果目录不存在那就创建一个。

配置主页的大图片

然后找到我们的主题配置文件(路径应该是 博客根目录/source/_data/butterfly.yml),然后找到default_top_img:这一行将链接替换成你刚才复制的链接即可.

说道这里我们顺便配置一下我们的头像,我们将我们的头像保存到这个目录中博客根目录/themes/butterfly/source/img/,在主题配置文件中找到这一行img: /img/avatar.png 将avatar.png改成你的图片的名字就可以啦.

配置主页的导航栏
我们可以看到我们的导航栏都是英文,我们可以自己手动修改。
我们打开我们的主题配置文档,路径在哪里我也就不用说了吧,在博客根目录/source/_data/butterfly.yml(最后一遍了)
配置文件开头就是我们的导航栏配置,默认配置如下

Yml
menu:
Home: / || fa fa-home
Archives: /archives/ || fa fa-archive
Tags: /tags/ || fa fa-tags
Categories: /categories/ || fa fa-folder-open
Link: /link/ || fa fa-link
About: /about/ || fa fa-heart
List||fa fa-list:
- Music || /music/ || fa fa-music
- Movie || /movies/ || fa fa-film
最终我修改完成后如下所示:

Yml
menu:
首页: / || fas fa-home
龟档: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
清单||fas fa-list:
- Music || /music/ || fas fa-music
- Movie || /movies/ || fas fa-video
友情链接: /link/ || fas fa-link
关于: /about/ || fas fa-heart
相信聪明的你,一看就懂了

主页名人名言

我们可以自动获取网络上的好句子,我们只需要将source: false换成下面你想选择的样式

source: 1 #调用博天API https://api.btstu.cn/
source: 2 #调用一言API https://hitokoto.cn/
source: 3 #调用一句话API http://yijuzhan.com/
source: 4 #调用今日詩詞API https://www.jinrishici.com/
这里要注意的是: 在显示的时候,会先实现网络获取的一句话,然后在获取本地设置的话

创建分类页,标签页,友情链接页
分类页
首先前往你的 Hexo 博客的根目录
输入hexo new page categories
打开source/categories/index.md这个文件
修改这个文件为:
Yml

title: 我的分类页
date: 2020-07-04 14:55
type: “categories”

标签页
首先前往你的 Hexo 博客的根目录
输入hexo new page tags
打开source/tags/index.md这个文件
修改这个文件为:
Yml

title: 我的标签页
date: 2020-07-04 14:55
type: “tags”

友情链接页
首先前往你的 Hexo 博客的根目录
输入hexo new page link
打开source/link/index.md这个文件
修改这个文件为:
Yml

title: 我的小伙伴们
date: 2020-07-04 14:55
type: “link”

友情链接的添加
在Hexo博客目录中的source/_data,创建文件link.yml

Yml

  • class_name: 萍水相逢的人
    class_desc: 随缘遇到的人
    link_list:

    • name:
      link: https://dreamer-liuyang.github.io/
      avatar: https://dreamer-liuyang.github.io/img/avatar.png
      descr: 一个靠兴趣制作视频的人
      文章置顶、文章描述、文章分类
      我们先看一下文章的开头应该大概是这样样子的.

Markdown

title:
date: 2020-07-04 13:55:59
description: 前言:
top: true
categories:

  • 个人博客

我们可以通过在文章三个横线下面添加
categories: 个人博客 添加文章的分类
top: true 来使文章置顶
description: 前言:龟速教程之手把手搭建博客1 来添加文章的描述添加链接描述

这里你又会发现,我们的文章摘要还是没有变,我们需要修改配置文件中的3,将3改成2,最后重启一下Hexo就可以了

Yml
index_post_content:
method: 2
length: 500 # if you set method to 2 or 3, the length need to config
最终添加完之后的代码如下所示:

Markdown

title:
date: 2020-07-04 13:55:59
description: 前言:
top: true
categories:

  • 个人博客

这里你会发现我们的文章没有置顶,这是因为我们没有相应的插件,我们需要执行下面两条命令

Shell
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
最终添加完之后的效果如图所示:

部署云端
现在我们的博客,感觉已经很漂亮了,接下来我们部署云端让所有人看到我们的博客吧!!!

最后!我们需要额外的一个工具来帮助我们推到仓库上,那就是!那就是!那就是 hexo-deployer-git。搞它!

执行下面的命令,进行安装插件

Code
npm install hexo-deployer-git --save
使用GitHub部署云端
我们在Github中建立一个仓库,其中仓库名字必须是xxx.github.ioxxx是你的Github名字

接下来,打开我们的博客配置文件,找到下面的内容

Yml
deploy:
type: git
repo: <你的仓库地址> # https://github.com/TJ-XiaJiaHao/TJ-XiaJiaHao.github.io
branch: master
然后写上你的仓库的地址

执行下面的命令,进行远程部署到我们的Github的仓库

Code

清理垃圾

hexo clean

推送到远端

hexo d
浏览器访问:https://xxxxx.github.io/ 即可看到效果。(把xxxx替换成的Github名字就可以了)例如我的是https://dreamer-liuyang.github.io/
不要着急,可能会有1-2分钟的延迟

使用码云部署云端
我们在Github中建立一个仓库,其中仓库名字必须和你码云的名字一样,过程

接下来,打开我们的博客配置文件,找到下面的内容

Yml
deploy:
type: git
repo: <你的仓库地址> # https://github.com/TJ-XiaJiaHao/TJ-XiaJiaHao.github.io
branch: master
如果你想Github和码云都进行部署,你可以仿照我们配置文件进行书写

Yml
deploy:
type: git
repo:
‘github’ : git@github.com:Dreamer-liuyang/Dreamer-liuyang.github.io.git
‘gitee’ : https://gitee.com/liu__yang/liu__yang.git
branch: master
执行下面的命令,进行远程部署到我们码云仓库

Code

清理垃圾

hexo clean

推送到远端

hexo d
部署之后我们还需要在码云仓库中,开启一下这个服务

最终终于大工告成了,本文也就到此结束了

搭建外文技术博客程序员都应该有自己的博客相关推荐

  1. 阿里再度开源重磅技术!95% 程序员都需要了解

    注:免费下载地址,见文中. 人类历史上的超级工程有什么?金字塔.万里长城.迪拜世界岛.三峡大坝-- 其实,我们还有个很特别的超级工程:人们看不到它的形态,却无时无刻不在感知它的存在.天南海北的货物因它 ...

  2. 35岁程序员职业危机?那45-50岁的程序员都在干什么?

    在 Reddit 有一则关于程序员职业生涯问题的帖子很火: 翻译:随着年龄的增长,程序员的职业生涯会发生什么变化?对于 45-50 岁左右的编程经历,你有什么故事或建议分享吗?如何在那之前规划自己的职 ...

  3. 程序员都是吃青春饭,40岁以后怎么办?

    国内顶尖信息学奥赛名校训练模式有感 国内顶尖信息学奥赛名校训练模式有感 2022-06-18青少年软件编程(C语言)等级考试(一级) T5 与7无关的数 2022-06-18青少年软件编程(C语言)等 ...

  4. 并不是所有的程序员都适合做技术管理

    摘要:这是曾经的技术高手,如今却是名职业经理人分享的内容.他称,相信很多程序员都想做管理,一方面是高薪,另一方面则是做管理很风光.工作也轻松,但实际上并不是所有人都适合做管理,技术和管理是两完全不同的 ...

  5. javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程(上)

    阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...

  6. 技术差的程序员,90%都输在这点上!骨灰级开发:其实都是在瞎努力!

    01 从未得到过重视的问题 "一流程序员学数学,二流程序员学算法,低端看高端就是黑魔法". 可能有人会以为这是段子,而有过开发经验的都知道,这就是程序员的真实写照! 而数学不好的程 ...

  7. 技术与市场脱钩?90%的程序员都错了!

    面对日新月异的技术潮流,怎样才能避免沦为与市场脱钩.甚至被无情清退的大龄码农?很多程序员都走了弯路! 安于现状,对于学习新技术这件事有些抵触: 一再拖延,身边的同事新框架玩的飞起,自己却懒于行动: 盲 ...

  8. 技术不够硬?90%的程序员都错了!

    面对日新月异的技术潮流,怎样才能避免沦为与市场脱钩.甚至被无情清退的大龄码农?很多程序员都走了弯路! 安于现状,对于学习新技术这件事有些抵触: 一再拖延,身边的同事新框架玩的飞起,自己却懒于行动: 盲 ...

  9. 阿里资深技术工程师: 程序员怎样快速成长?

    梦想很美好,现实却很残酷 不管是开发.测试.运维,每个技术人员心里多多少少都有一个成为技术大牛的梦.毕竟"梦想总是要有的,万一实现了呢"? 但很多阿里的新人,工作后就会发现,梦想是 ...

最新文章

  1. Python中的小细节
  2. [记录]CentOS搭建SVN服务器(主从同步)
  3. 算法--------------整数反转
  4. 010_JavaScript变量
  5. java以Blob形式存储,读取图片并在jsp页面显示图片流
  6. 请分析比较下列四种染料在相同浓度和相同温度的水染液中的聚集度大小?
  7. css显示内容越来越模糊_纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...
  8. qt设置窗口不在任务栏上显示
  9. 【Python】matplotlib.pyplot 常用技巧
  10. Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX AVX2”
  11. 最简单播放m3u8链接的方法
  12. SecureCRT 中文(附上1.解决SecureCRT乱码问题2.解决Hostname lookup failed: host not found问题)
  13. python开发小程序拼团_【微擎微赞模块】砍价宝4.5小程序版+小程序前端+后端+素材包+砍价+抢购+拼团...
  14. 交换机生成树相关实验
  15. 18个Windows应该有却没有具有的服从(2)
  16. QT之如何添加现有文件
  17. 职场 | 联发科MTK手机通信协议软件开发工程师面试总结
  18. HDU - 1242
  19. 社区分享|TensorFlow Recommenders-Addons 开源啦!
  20. Lesson 11:聚类分析

热门文章

  1. phpmyadmin mysql float 长度_mysql – phpMyAdmin – “请输入有效长度”
  2. OpenShift 4 之Knative(2) - 第一个Serverless应用
  3. 在MySQL中使用游标和for循环
  4. mr图像翻转的原因_MR成像技术讲解
  5. 三菱fx5u modbus tcp fb块用法_2020江苏三菱PLCFX3GA14MT回收回收上门提货西门子软启动器...
  6. 微信小程序选择框问题 小程序picker点击显示object range-key=这里写要显示的字段
  7. php 数组重复最多,PHP获取数组中重复最多元素的简单示例
  8. 怎样手动给无线网设置一个DNS服务器地址,无线网的dns怎样设置.docx
  9. 修改文章更新缓存php,php – 使用liipImagineBundle更新/删除记录时删除/更新缓存的图像...
  10. mysql存储过程的正确描述_MySQL存储过程中的基本函数描述