声明

本文只是让大家体验一下如何建立一个属于自己的站点,不涉及任何更深层次的技术,如果想走前端,建议去深了解一下,其他方向按本文步骤来即可。

关于hexo

hexo是一个快捷、简单并且强大,基于Node.js的一个静态博客框架。支持Markdown解析文章,能够很快的生成特定主题的静态网页。

关于gitee

基于 Git 的代码托管服务,除了提供最基础的 Git 代码托管之外,还提供代码在线查看、历史版本查看、Fork、Pull Request、打包下载任意版本、Issue、Wiki 、保护分支、代码质量检测、PaaS项目演示等方便管理、开发、协作、共享的功能。

安装工具

1.安装Node.js:官网教程
2.安装git bash工具:官网,点down,然后一路next就行
3.安装hexo:

  • 新建一个存放blog所有东西的文件夹

  • 文件夹内右键,点击git bash here

  • 输入:npm install -g hexo-cli

  • 安装完成后,查看版本,输入命令:hexo -v

    若告诉你版本,即是成功:

    版本图片

开始搭建

0.前言

以下步骤根据个人网速会有不同时间,不要总终止,耐心等待

1.初始化hexo

输入:hexo init;生成好的文件夹你会看到以下:

生成文件

其中:

  • source:放文件图片等,你所写的Markdown也放在这里

  • themes:主题

  • _config.yml:站点配置文件,很多全局配置都在这个文件中。

2.运行到本机

输入:hexo s,会出现以下:

运行

这些的意思是运行成功,关闭输入ctrl+c,运行结果要在浏览器输入 localhost:4000 即可看见:

运行成功

3.生成静态文件

此步是为了上传到gitee做的。因为目前只能自己在本地访问博客,但是想让其他人看到就要结合gitee来做了,这里多说一嘴,其实github也可以,但是好多人访问会很慢,所以选择gitee。输入:hexo g;目录中就会多出一个public文件夹,这个文件夹就是我们托管到码云上用的文件夹。

4.部署到gitee

1.注册:官网
2.点击加号:

创建0

点击新建仓库:

创建1

仓库名称一定要用个人空间地址,个人空间地址一定不要带大写字母,如果你不知道自己的空间地址是什么或者想修改,请点个人主页,个人空间地址进行操作,因为我已经建了同名仓库,这里被禁止,正常是绿的。

创建2

3.创建完成后我们需要安装插件,输入:npm install hexo-deployer-git –save

4.接下来是配置根目录_config.jml文件,进行以下操作:

  • 6行title改成自己网站名,10行author改成自己,11行language改成zh-CN

  • 47行,改成以下(此步是为了代码高亮);

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: false
  wrap: true
  hljs: true
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''
  • 105行,修改deploy的值,修改前如下图:

创建3

将其修改成:

type: git
repo: https://gitee.com/shuangxunian/shuangxunian.git
branch: master
message: blog

其中的repo为你刚刚建的仓库中的:

创建4

5.输入:hexo d
之后会弹出输入码云账号密码的对话框,输入账号密码,等待上传结束,之前创建的项目中出现了本地项目中public文件夹中的文件,这就代表部署成功了。

创建5

6.开启码云的Pages功能,点击启动服务:

创建6

7.点击链接,成功!

5.问题

有时候会出现上传没有css和js样式的情况,这里我们打开_config.yml,找到第14行左右

p0

将其url修改成自己的url:

p1

然后执行:

  • hexo clean

  • hexo g

  • hexo d

然后回到部署的页面,点击更新:

更新0