如何搭建一个简易的个人网站

发布 : 2018-04-10

以下全部操作均在Ubuntu 18.04.1 LTS中进行测试。

先做好准备工作

安装工具

所需要的工具: node.jshexogit,如你已经安装,跳过这一步。

安装node.js

1
$ node -v

如果提示命令没找到,按照下面进行安装,否者跳过这一步。
我这里安装的是12.x版本,安装其他版本参见链接

1
2
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install -y nodejs

安装hexo

1
$ hexo -v

如果提示命令没找到,按照下面进行安装,否者跳过这一步。

1
$ npm install -g hexo-cli

安装git

1
$ git --version

如果提示命令没找到,按照下面进行安装,否者跳过这一步。

1
$ sudo apt-get install git

开始搭建博客

1. 注册一个github账号(有账号跳过这一步)

注册地址

2. 新建一个repository

如下图所示

点击New repository后会出现

注意这里的Repository name文本框。黄色框起来的username你可以随便取名。浅蓝色框起来的github.io必须得填github.io。也就是形式得是username.github.io。至于为什么,具体看官方说明

其他的自己看着填入即可。

3. 拉取repository到本地电脑

1
2
3
4
5
6
7
8
9
10
11
12
13
# 拉取username.github.io.git到本地
$ git clone https://github.com/czorange123/username.github.io.git
# 等待克隆完毕后
$ cd username.github.io.git
# 新建一个hexo项目
$ hexo init blog
# 等待执行完毕,会生成一个blog文件夹,里面就是我们的博客项目文件了
# 将.git文件夹复制到blog文件夹下,这一步是为了将blog项目提交的github上去
$ cd blog
$ cp -r ../.git/ .
# 测试hexo博客是否创建成功
$ hexo generate
$ hexo server

出现如下信息说明搭建成功

INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

项目默认运行在4000端口,点击地址即可访问。

4. 将项目提交到github

为了能使用github提供的github pages,我们需要将项目提交到github

1
2
3
4
5
6
# 在blog目录下
$ git status
$ git add .
$ git commit -m"init hexo-blog"
$ git push
# 提示输入github用户名和密码,而后即可提交上去

提交上去后github上项目是这样的

5. 部署项目

使用编辑器打开项目(blog)文件夹,在根目录下找到_config.yml文件,修改deploy配置,如下

  1. 修改root配置

  2. 修改deploy配置

  3. 然后开始部署

    1
    2
    3
    4
    5
    6
    # 在blog目录下
    # 先安装部署用的包
    $ npm install hexo-deployer-git --save
    # 等待安装完毕后
    $ hexo deploy
    # 提示输入github用户名和密码,而后即可部署上去

6. 在线访问

打开github刚提交的项目,点击settings,如下

往下滚动找到GitHub Pages

通过链接即可访问部署好的博客


相关文档 & 资料

demo & 项目地址

The End😀