0%

基于hexo搭建个人网站(mac版)

个别图源:简书 小pxu

写在开头:

非计算机专业的小伙伴们可能觉得搭建网站是一件很复杂很难的事情。确实自己纯手工去敲确实是一件很麻烦也很烧脑(至少对我这个菜鸟来说是这样,毕竟我也是非计算机ZZZ)。但其实有很多开源的平台可以让我们去利用。一个网站通常需要域名、服务器(空间)、DNS域名解析、网站程序、数据库…等等东西,当然不同的网站构成是不同的。我在这块介绍的这个方法(基于Github-hexo)对我这个没钱又想装逼的小子来说有以下优点:

1、不需要域名和服务器

2、访问自己博客的时候没有广告

3、可以自己修改样式,能根据自己的需求加功能。


因为我是在mac上操作的,这里就以mac为例(windows可作为参考):

如果你有GitHub账号、电脑安装了xcode、node.js等不到半小时就可以完成搭建。期待吧~

博客搭建的环境

  1. node.js(在node.js官网中下载安装)node.js官网
  2. git(OS系统中直接安装x-code就可以了)
  3. hexo(打开OS系统终端、输入安装hexo的代码(此处安装时有可能会提示输入系统管理员密码)
1
$ sudo npm install -g hexo

hexo创建静态博客

  1. 新建blog文件夹
  2. 在终端进入该文件夹,初始化博客
    1
    $ hexo init
  3. 上述完成后,生成原始文件;blog文件夹就是博客的根目录
  4. 本地查看:启用本地服务命令(退出按ctrl+c)
    1
    $ hexo s
  5. 将出现的地址输入浏览器,即可可查看到本地效果

    GitHub配置

  6. 注册github账号并登陆
  7. 获取本机的SSH口令
1
2
3
4
5
6
7
8
9
10
1)输入获取代码,回车直到出现图片所示图形为止
$ ssh-keygen
2)输入编译代码
$ vim ~/.ssh/id_rsa.pub
3)出现SSH口令后,将红框部分复制,并在下方输入:q,随后按下回车可以退出该窗口
4)进入到github页面设置SSH口令
点击用户下拉菜单中的settings(step1)
点击左侧的SHH and GPG keys(step2)
在Title中输入口令名称(随意)(step3)
在key中贴上SSH口令(step4)

Alt text
Alt text
Alt text
Alt text

创建新的仓库

1
2
3
4
5
6
7
8
9
10
1)创建新的仓库(repOSitory)
点击用户左侧的+号菜单中的New repOSitory(step1)
在repOSitory name中输入二级域名,格式请严格遵照username.github.io(step2)
ps:username填写github的登录用户名,否则上线的时候会报错
是否公开选项可以选取Public(step3)
勾选step4处,会自动生成一份可编辑的README.md文件(建议勾选)(step4)
点击create repOSitory生成仓库完毕(step5)
2)查看新建的仓库(repOSitory)
可以回到github个人首页点击右侧的仓库区
进入后在step1处选择并复制http地址,注意此时step2处应该是空的

Alt text
Alt text
Alt text

发布博客

  1. 设置blog配置文件

1)打开blog文件夹下的_config.yml文件

2)找到最下方的type,输入git(注意冒号后面是带空格的)

3)repo行可能没有,需要自己输入,后面跟上github上仓库中复制的http地址(注意此时1、2两处应该是一样的username),不然上传时会报错
Alt text

4)其他博客设置

1
2
3
4
5
title:博客名称
subtitle:博客副标题
description:博客描述
author:作者
language:语言(简体中文是zh-CN)
  1. 在终端上传博客
    1)进入终端,输入git上传插件安装代码(安装时会提示输入github用户名及密码)
1
$ npm install hexo-deployer-git --save

2)安装完毕后,输入获取代码

1
$ hexo g

3)最后输入上传代码

$ hexo d

4)重新在github仓库查看上传文件,此时在step2中会有之前bolg中生成的文件
5)step3处就是你的博客地址
Alt text


写在文末:

这样一来我们的博客就搭建完成了,尽管GitHub个人网站项目是免费的,但是却有一些限制(单个仓库大小不超过1GB)。总体来说,完全够用,所以目前不用担心内存问题。之后大家就可以尽情对你的个人博客进行美化以及添加内容了。

写完了,欢迎拍砖啊~