hexo评论_【前端简历加分】hexo框架搭建个人博客站点,手把手教学

最近,粉丝们在金九银十期间也是不断的面试,有比较多的毕业生说我在这个期间出多一些面试题,上几期都是倾向于面试文章,这期出一次简历加分项操作,使用hexo框架搭建个人博客。

作为应届毕业生或者1-3年工作经验的程序员拥有自己的个人博客站点,绝对是简历的加分项,然而学习的成本确实非常的低,只要几十分钟就能搭建好自己的个人博客。

525623ffe5373c0ba409c675d1606814.png

闲话不多说,下面我们就开始动手来搭建自己的博客吧!

安装Node环境

首先我们在本机要安装Node环境,我们可以直接来到Node.js官网:https://nodejs.org/en/,直接点击下图下载。

51e046a122e553942d087643fb7d9e58.png

下载后,直接双击,然后就是一直下一步下一步的傻瓜式操作。这里要注意的是:有的人的电脑可能已经安装好Node环境,已经安装好的可以通过在cmd窗口执行下面的命令查看Node版本

node -v
13290ef1e48a6082da195d5f01ed7748.png

若是在Node版本为10以下的要更新一下自己的Node版本,因为Node10以下版本的执行安装hexo的时候会报错,并且它会明确的提示你版本不匹配的报错信息

安装完后,再次检验一下cmd窗口分别输入输入下面两条命令:

node -v
npm -v

安装完Node环境后,就是安装Git,安装Git很简单,这里就直接略过了,在Git官网下载:https://git-scm.com/downloads,然后也是傻瓜式一步一步的操作。

安装hexo

首先,在自己的本地中新建一个文件夹用来存放hexo的代码,我这里就直接在E:\MyBlog下进行安装hexo

在E:\MyBlog目录下,右击打开Git Bash,接着在Gir Bash中执行:npm install -g hexo命令,当看到下图所示表示安装完成,第一次可能等的时间会比较长:

15622cb79bbbd1b5e95467fffd27d7f1.png

接着在执行:hexo init,初始化hexo项目,实际是从github中拉取项目:

6e5002999c51d930c5f03cecf34b1bfe.png

当hexo初始化完后,你就能看你当前目录下多出了很多有关hexo项目的文件:

2c8f73ebf6ef027254310f37b3819cb3.png

这些目录中,其中比较重要的文件和文件夹是:sourcethemes文件夹,以及_config.yml文件:

  1. source:该文件夹是存放我们自己文章的地方,文章存放在该目录下的_posts文件夹中。
  2. themes:用于存放博客的主题信息。
  3. _config.yml:是hexo博客的配置文件,很多配置信息都在这里面。

接下来执行:npm installhexo g,使用npm源安装所依赖的组件和编译生成静态页面

3e46667d07e6bd42f3c3fb26772d36fa.png

执行完上面的命令后,你会发现项目多了一个public文件夹,该文件夹就是用于存放静态页面的地方,该文件夹下的静态页面都是根据配置文件动态生成的,所以只要修改配置文件_config.yml中的配置信息,就可以使生成的静态页面发生改变:

3de23d1f35b530a501fd175200473cf3.png

最后就是启动hexo,通过执行命令:hexo s,就会出现如下的页面:

dd305c497f2f737518115ce423b90078.png

它已经明确的告诉你,访问本地4000端口,在浏览器输入:http://localhost:4000,若是出现了下面的页面说明本地搭建成功:

e46e9fe214b989d0d8a5404a48a91130.png

我们现在能看到的就是hexo默认的主题,该主题信息存储在themes下的landscape文件夹中。

若是想要修改这个默认主题,比如上面图片中大大的Hexo字体,我们要修改为我们自己的博客名称,首先打开MyBlog目录下的配置文件_config.yml

8baaf717214fc802b780733b36cb7657.png

在这个配置文件有很多的配置信息,我们可以先找到title以及author这两个字段修改形成我们自己的信息。

d5ff61f35e8b31e363fd68cf6addb192.png

接着执行:hexo cleanhexo ghexo clean:表示清除原来的缓存,它会直接把原来编译生成的静态文件夹public直接删除hexo g:又会再次根据配置文件生成静态页面

1120e67f8dfe76bfc01ae5f3fe85470c.png

最后,我们再次启动项目(hexo s),访问http://localhost:4000

a57572e3bb75c73f07f98942b68e5bfb.png

我们Hello World的文章换成我们自己的文章,这个文章就是位于我们前面所讲的source/_posts文件夹下:

a0c8a3bdba419a06c21255aa9431224c.png

我们只要把这个md替换成我们自己文章的md就可以了,然后再依次执行下面三条命令:

hexo clean
hexo g
hexo s
003e693c8b91037dcc882b2b12769daf.png

下面我们来看看效果:

347baeacf90cde4f872d78ea363046b7.png

这样就好看很多,另外要注意的是要想在上图的右边红色框内显示提交的主题,要在你的文章内加入标题,它就会自动识别:

---
title: 我以为我对Mysql事务很熟,直到我遇到了阿里面试官
---

另外,蓝色框内的显示的提交的时间,点击可以跳转到提交的分类记录中:

8965ea7c2de507b035233fb3df65170c.png
分类

但是,还是感觉这个主题很丑,这时候就要用到hexo官方的主题库:https://hexo.io/themes/ ,在这里可以选择自己预览自己的主题库:

2b900182922a055759ec6021ded8bf2f.png

这里我选择一个比较高大上(骚)的主题,点击红色框内就是预览该主题,点击蓝色框就会跳转到该主题的github源码地址。

若是想要使用该主题,必须要把该主题下载下来,首先点击蓝色框进入该主题的github地址,复制该github地址,然后需要执行下面的命令:

git clone https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

它表示把主题源码下载到themes主题文件夹下的volantis文件夹下。下载完后,要修改MyBlog目录下的配置文件_config.yml中的下面字段的配置:

fa9be7158b6bf90a77d82d30a5bda2bb.png

最后在执行hexo clean、hexo ghexo s命令,就可以在浏览器看到效果:

aa34978273aefe6b45790835e47a9106.png
cc78b3463bccc3dd4dcb7f47f945df4a.png

是不是感觉瞬间高大上,牛逼了很多,这样一个自己博客逼格就出来了,不需要自己写界面和后台,所以直接使用hexo来搭建个人技术博客还是非常方便的,基本的需求都能满足。

此时。在本次部署好之后就可以将代码推向github仓库,但是在推向github之前,你的MyBlog文件夹必须与你的远程仓库相关联,这个关联的方法在这一篇[(一)深入浅出图解Git,入门到精通(保姆级教程)]已经讲过了,这里就不再做详细的赘述了,就是将你的本地的.ssh/id_rsa文件中的key复制到远程仓库中的SSH Keys

当你的本地仓库与远程仓库关联后,就在远程仓库创建一个如下图所示的仓库,仓库名必须是:你的用户名+".github.io"

8c0b8abcd83019a15deb2e641121117b.png

最后还要在MyBlog文件夹下的_config.yml配置文件中配置如下的信息:

3d296db144fab1fdc67f9c192f995562.png

这样子就可以使用下面四条命令,就可以将你本地的代码推向远程仓库了:

npm install hexo-deployer-git --save
hexo clean
hexo generate
hexo deploy

最后在你的浏览器输入:http://+"你的用户名"+.github.io,就可以访问你自己的个人博客了,例如我个人的博客站点是:http://liduchang.github.io,最后的效果:

41a2c3083330a91dc1df6b8228c0c085.png
a3ab55ca5b5ad88ad7915ec5e083fe98.png

到此,使用hexo框架搭建个人博客的教程就已经结束了,最后有一点要说明一下的是:除了MyBlog下的配置文件_config.yml文件可以修改,还有themes/volantis文件夹下的_config.yml配置文件也是可以修改的,这个可以自己去研究。

960377e5c6cc2db965489db35f922132.png

然后每次修改完,也是执行下面四条命令:

hexo clean
hexo g
hexo s
hexo d

我觉得主题信息可以选择比较简单的,因为都是基于配置信息进行配置的,假如太复杂的博客主题,你还要去它的github的源码地址中去研究它每一个配置字段的含义或者看他的注解,会花费大量的时间,我觉得没必要。

经过多用户的访问测试显示,有的人手机无法访问,有的人手机可以访问,有的人电脑无法访问,有的人电脑可以访问,具体原因不太清楚,若是有人知道原因的,可以在评论区告诉我原因,不甚感激。

最后说一句,你的面试官能不能看到你搭建的站点就得看命了,很可能访问不了,哈哈哈哈,好了这一期到这里就结束了,我们下一期见,欢迎访问我的个人站点:https://liduchang.github.io/

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

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

相关文章

电脑抓整个路由器的包_网络是电竞游戏体验的命脉 2018年年度电竞路由器功能盘点...

2018年是电竞路由器的元年,从2017年的概念产品诞生开始,电竞路由器很快就确定了品类,随着《绝地求生》、《王者荣耀》等对网络质量敏感的竞技游戏的火爆,电竞路由器迅速被竞技玩家熟知,并在2018年以野火燎原的速度发展…

dos 改某个目录下所有文件的时间_go语言入门学习笔记(2)-DOS操作及go语言变量学习...

API:application program interface:应用程序编程接口。就是我们go的各个包的各个函数。我们想要了解这些函数我们可以通过Go的中文网在线标准库文档:https://studygolang.com/pkgdocDOS介绍:Dos:Disk Operating System 磁盘操作系…

es multi match_PHP 的ES搜索操作

原文:https://blog.csdn.net/JineD/article/details/106650695首先从ES的支持的字段说起,ES文档中字段有多种类型 官方文档。这几个比较常用:text,keyword,integer,float,boolean,object,geo_point(地理坐标),geo_shape(描述地理区域),date.注…

git 怎么还原历史版本_4. Git--修改/回退等操作

》》点赞,收藏关注,理财&技术不迷路《《我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容:Git is a distri…

为什么用python写爬虫_零基础,是怎么开始写Python爬虫的

刚开始接触爬虫的时候,简直惊为天人,十几行代码,就可以将无数网页的信息全部获取下来,自动选取网页元素,自动整理成结构化的文件。利用这些数据,可以做很多领域的分析、市场调研,获得很多有价值…

datatable怎么根据两列分组_谈谈怎么做服务隔离

来源于公众号孤独烟 ,作者孤独烟引言OK,如下图所示那显而易见,做服务隔离的目的就是避免服务之间相互影响。毕竟谁也不能说自己的微服务百分百可用,如果不做隔离,一旦一个服务出现了问题,整个系统的稳定性都…

position: absolute;_前端性能优化--transform与position

上个星期去yy语音面试&#xff0c;就有一个这样问题&#xff1a; transform与position:absolute 有什么区别? 我回家后查资料发现这道题目其实不简单啊&#xff0c;涉及到重排、重绘、硬件加速等网页优化的知识。首先看一个用top、left实现的动画效果<style>html,body {…

台式计算机总是重启,台式电脑经常自动重启怎么修复

当我们的电脑出现了电脑自动重启的时候&#xff0c;我们就要注意了&#xff0c;说明我们的电脑主机出现问题了&#xff0c;怎么解决呢。下面是学习啦小编为大家整理的关于台式电脑经常自动重启的相关资料&#xff0c;希望对您有所帮助!台式电脑经常自动重启的解决方法方法/步骤…

线程执行完之后会释放吗_java多线程并发:CAS+AQS+HashMap+volatile+ThreadLocal,乐分享...

CyclicBarrier、CountDownLatch、Semaphore 的用法CountDownLatch(线程计数器 )CountDownLatch 类位于 java.util.concurrent 包下&#xff0c;利用它可以实现类似计数器的功能。比如有一个任务 A&#xff0c;它要等待其他 4 个任务执行完毕之后才能执行&#xff0c;此时就可以…

计算机应用基础考查方案,《计算机应用基础》考查方案

《计算机应用基础》考查方案 《计算机应用基础》考核方案 制订人&#xff1a;刘久红老师 计算机应用基础科任教师 制订部门&#xff1a;基础课与思政课教学部 制订时间&#xff1a;2012年12月 一&#xff1a;考核依据 计算机应用基础是面向全院各专业开设的一门重要的公共基础课…

无法启动此程序因为计算机丢失msvcr110.dll,计算机中丢失msvcr110.dll怎么办

我们在打开电脑程序的时候&#xff0c;系统提示无法启动此程序&#xff0c;因为计算机中丢失MSVCR110.dll&#xff0c;尝试重新安装该程序以解决此问题。这是什么情况呢?因为现在所有的5.5环境都是基于vc11的编译脚本下生成的&#xff0c;所以在windows下你得安装相关组件&…

anaconda pandas运行不了_学习python你必须弄懂的 Python、Pycharm、Anaconda 三者之间的关系...

Python作为深度学习和人工智能学习的热门语言&#xff0c;学习一门语言&#xff0c;除了学会其简单的语法之外还需要对其进行运行和实现&#xff0c;才能实现和发挥其功能和作用。下面来介绍运行Python代码常用到的工具总结。一.Python、Pycharm、Anaconda关系介绍1. PythonPyt…

java: 程序包com.alibaba.fastjson不存在_Java开发中的异常

NO.1 Java.alng.NullPointerException这个异常大家肯定都经常遇到&#xff0c;异常的解释是 “程序遇上了空指针 “&#xff0c;简单地说就是调用了未经初始化的对象或者是不存在的对象&#xff0c;这个错误经常出现在创建图片&#xff0c;调用数组这些操作中&#xff0c;比如图…

关于csgo的观看录像fps低_CSGO:Ququ带队击败LQ豪取五连冠,8次MVP闪耀全场

电子竞技热点资讯&#xff0c;敬请关注老年人三旬&#xff01;自从CSGO这款游戏上市之后&#xff0c;在整个FPS领域内就一直处于顶流位置&#xff0c;这款游戏对于所有热爱射击游戏的玩家来说&#xff0c;不但是经典作品《半条命》的延续&#xff0c;更是一款对玩家要求极高的游…

python 3d大数据可视化_基于Python的数据可视化库pyecharts介绍

什么是pyecharts&#xff1f; pyecharts 是一个用于生成 Echarts 图表的类库。 echarts 是百度开源的一个数据可视化 JS 库&#xff0c;主要用于数据可视化。pyecharts 是一个用于生成 Echarts 图表的类库。实际上就是 Echarts 与 Python 的对接。 使用 pyecharts 可以生成独立…

dev多行注释_Python代码注释的用法和意义

01. 注释的作用在大多数编程语言中&#xff0c;注释都是一项很有用的功能。在一些简单的程序中只包含Python代码&#xff0c;但随着程序越来越大、越来越复杂&#xff0c;就应在其中添加说明&#xff0c;对你解决问题的方法进行大致的阐述。注释让你能够使用熟悉的自然语言在程…

python的数据库_python数据库操作-mysql数据库

一&#xff1a;连接 1&#xff1a;本地连接 mysql -u用户名 -p密码 2&#xff1a;连接远程服务器 mysql -u用户名 -p密码 -hip地址 -P端口号 线下修改远程服务端上部署的mysql服务器 二&#xff1a;创建数据库 create database 名字 utf8; 三&#xff1a;显示数据库 show datab…

svn如何取消某个文件的版本管理_微服务架构如何统一管理工程配置文件

面临的问题在分布式微服务架构系统中&#xff0c;业务和系统功能被拆分成了几十甚至上百个服务实例。每个服务实例就是以往单体应用时代的一个独立部署的工程。每个工程都需要自己独立的启动加载和运行时配置文件。在项目开发的过程中&#xff0c;我们不可避免的会涉及到配置文…

linux 线程_Linux 多线程编程(不限Linux)

前言线程&#xff1f;为什么有了进程还需要线程呢&#xff0c;他们有什么区别&#xff1f;使用线程有什么优势呢&#xff1f;还有多线程编程的一些细节问题&#xff0c;如线程之间怎样同步、互斥&#xff0c;这些东西将在本文中介绍。我在某QQ群里见到这样一道面试题&#xff1…

springboot导包显示不存在_基础篇:Spring Boot入门体验(图文教程)

优质文章&#xff0c;及时送达什么是 Spring Boot&#xff1f;Spring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot 是所有基于 Spring Framework 5.0 开发的项目的起点。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。设计…