零基础在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
之后对博客的更新操作都可以在本地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
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)