零基础在Github上搭建个人博客_github搭建博客

在家休息的时候，学习一下在Github上搭建个人的博客，网上查阅资料发现，github提供了访问的地址，只需要将你自己账号下的仓库稍作修改就可以通过浏览器访问。下面记录自己搭建的过程，方便备查。

准备工作

在个人博客搭建之前需要准备好：
（1）域名
（2）github账号

第一步、建立仓库

1、首先在个人gethub上建立个人的仓库，用于存放博客的相关信息。

命名规则：你的用户名.github.io
eg：你的GitHub账号是apple.github.io，则可以通过http://apple.github.io访问你的网站
2、在本地D盘新建了一个文件blog，用于存放仓库的内容。
按住shift，同时右键，选择在此处打开powershell命令，将文件夹或其中的内容提交到GitHub上博客仓库。
文件夹下新建两个文件：
1、index.html 直接输入hello word 用于测试页面显示
2、CNAME 用于存放域名，如 apple.com ，注意不用加www
在本地文件提交到Github上提示需要输入github的账号和密码，如实填写即可！

//git的初始化 会在blog文件夹下生成.git文件
>> git init
Initialized empty Git repository in D:/blog/.git/
//添加
> git add .
//提交
> git commit "first commit"
//访问github上地址
> git remote add origin git@github.com:账号/账号.github.io.git
//将本地的master分支推送到origin主机，同时指定origin为默认主机
> git push -u origin master
//提交成功 控制台会打印出以下的内容，供参考
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 221 bytes | 221.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/wang961926256/wang961926256.github.io.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 
'origin'.
//Git文件提交  (注意是master分支）
> git pull origin master
//提交
> git push origin master
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

之后对博客的更新操作都可以在本地blog文件下进行更改，再提交到远程仓库发布。

第二步、访问地址

在浏览器上输入你的建立的仓库，如apple.github.io,页面显示出来 hello word，以上就是github提供的博客的地址来访问资源。

第三步、在域名管理添加地址

个人申请的是腾讯云的域名，因此进入到腾讯云的管理的控制台，添加对应的信息

注意：如果是初次申请的域名，是需要进行审核的（上传身份证的照片）
接下来输入域名，看页面上是否跳转到 index.html 页面，显示hello word
以上三步操作，说明配置成功！博客的发布和渲染还需要接下来的操作。

第四步、选择合适的主题

本文选用的是hugo，还可选择hexo，以下介绍hugo配置的过程

1、下载安装hugo

仓库地址：https://github.com/gohugoio/hugo/releases
本文选用的是在window上操作，使用的是 hugo_0.40.3_Windows-64bit.zip 这个版本。下载解压后添加到 Windows 的系统环境变量的 PATH 中即可，不需安装。

2、配置hugo

cmd进入blog文件夹下，执行hugo命令，具体可以参考hugo官方网站快速指南 链接：https://gohugo.io/getting-started/quick-start/

//创建站点
hugo new site blog
1
2

执行创建站点命令，会在指定目录下生成blog文件，同时文件夹下默认生成hugo需要的各类文件，如下图所示

content 文件夹 存放主要的内容 如博客
static 文件夹 存放image照片等
themes 文件夹 存在下载的主题
config.toml 是博客的配置文件

3、下载主题

将下载的主题放到theme文件夹下，便于接下来的解析。下载地址：https://themes.gohugo.io/，选择自己喜欢的类型。在主题文件下有exampleSite是个简单的demo，可以参考其进行配置自己的博客，祝好！

cmd 进入blog文件下，执行本地编译命令，编译成功可以在http://localhost:1313/ 查看效果

//本地渲染命令
> .\hugo server -D
Building sites … 
                   | EN  
+------------------+----+
  Pages            | 57  
  Paginator pages  |  0  
  Non-page files   |  0
  Static files     | 75
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Built in 243 ms
Watching for changes in D:\blog\wqjblog\{archetypes,content,data,layouts,static,themes}
Watching for config changes in D:\blog\wqjblog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
//发布博客命令
> .\hugo -D
Building sites …
                   | EN
+------------------+----+
  Pages            | 57
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 75
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 723 ms
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

执行完发布博客命令（.\hugo -D）在blog文件夹下回生成一个 public 文件，里面是渲染出来的各类文件，只需要将该文件发布到github指定的仓库，即可通过域名进行访问。

运行模板主题效果如下图所示：

总结：参考网上搭建的步骤，一步步操作，直到最后出来页面，很兴奋，接下来就要好好管理自己的博客，多做总结！

博客来源

【1】https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html#%E5%88%9B%E5%BB%BA%E4%BB%93%E5%BA%93