在家休息的时候,学习一下在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

之后对博客的更新操作都可以在本地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

执行创建站点命令,会在指定目录下生成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

执行完发布博客命令(.\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

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐