写这篇文章的原因是在网上看了很多的教程,踩了不少的坑,更多的白费了很多功夫,也没找到一篇从头到尾完整有效的个人建站方法。
有些教程年代久远,有些教程极为繁琐,有些教程压根跑不通。
为了方便自己,做个记录,也方便大家,在这个人人都可以发声的时代,又感觉人人的喉咙都被扼住了。
虽然大家在各个媒体平台都有自己的账号,但是给自己留一份自己的自留地,貌似也不会是什么坏事。
这也是我建个人博客的最主要理由,因为有些东西因为这样的或者那样的原因,无法在公域平台发布,那么自己的博客网站,总可以容纳的下。
建立个人博客的两个方法
这是一套非常简单的方法,我希望可以让每一个人都可以照着这套方法建立自己的博客。
总共分为两个版本:
第一个版本为通用版本,利用云服务器的host功能,一个月仅需要花费一杯咖啡的钱。
第二个版本为github版本,利用github pages的免费host和自动部署功能,不需要花一分钱就可以拥有自己的博客。
视频版本:
如何零基础零费用的在30分钟内创建一个专属于你的个人博客 - 简单快捷到建议人手一个
前置准备
Mac 和 linux
需要:homebrew,git包管理,Node.js, vscode(推荐)
homebrew安装:直接命令行输入
/bin/bash -c "$(curl -fsSL /Homebrew/install/HEAD/install.sh)"
git包管理:直接命令行输入
brew install git
Node.js: 下载安装包后按照默认设置安装
Node.js下载链接
Windows
需要:git包管理,hugo预编译文件,Node.js, vscode(推荐)
git包管理:点击下面链接下载后安装
git包管理下载链接
Node.js: 下载安装包后按照默认设置安装
Node.js下载链接
准备 hugo 环境
我们用hugo来写个人博客,它是一个非常快捷和友好的博客框架。
mac 安装方法:命令行种输入
brew install hugo
Windows安装方法
比mac要麻烦点,但是安装方法很详细。
windows版本的安装方法
学会在命令行中创建blog
windows:在搜索栏中输入cmd或者命令行
mac:找到Terminal
创建一个新的blog
使用命令hugo new site
来创建一个博客,pingfan-blog这个名字可以根据自己的需要改
hugo new site pingfan-blog
进入刚刚创建好的博客文件夹中
在命令行中使用cd
命令
cd pingfan-blog
给博客加个皮肤,一次复制+粘贴三行代码到命令行中
第一行:把当前目录进行github仓库的初始化
git init
第二行:下载anatole主题,并存放在themes文件夹中
git submodule add /lxndrblz/anatole.git themes/anatole
第三行:把主题改为anatole
echo theme = "anatole" >> config.toml
写第一篇blog
hugo new
+ aaa/bbb.md, aaa指代的是某一个文件夹,如果你想写美食和电影两种,那就是[美食/第一篇美食.md],或者[电影/第一篇电影.md],尽量都用字母,其次一定要加.md
hugo new life/first_day.md
运行下博客看是否可行
hugo server
出现以下界面后,打开任意浏览器,输入http://localhost:1313 即可查看。
一般是因为1313端口被占用了,可以用它生成的别的网址;或者用kill -9 $(lsof -ti:1313)
在命令行把1313端口重新释放出来
浏览器中出现如下界面说明你成功了
生成静态文件,准备进一步托管
hugo -D
你可以去自己的文件目录中看到,public文件夹里面已经多了很多文件出来。
静态网站托管服务
使用云服务进行托管,这一步针对是不能访问github的同学,那么你必须得用一款云服务器进行托管。
1. 首先你得有一个云服务空间,这里我使用的是腾讯云的cloudbase
这里我使用的是腾讯云的cloudbase,可以通过下面这个链接,选择新用户体验券后可以免费体验一个月。
腾讯云cloudbase免费试用一个月链接
添加成功后点击【控制台->云产品->cloudbase】,点开可以看到如下内容。
2. 创建好后得到了一个环境ID,待会儿要用到
3. 在本地安装Node.js
网址为:/en/ windows和mac按类型下载,下载完成后安装即可。
在命令行中输入以下验证是否安装成功
npm -v
出现类似于6.14.13就表示成功了。
4. 打开命令行,输入以下命令安装 cloudbase cli
npm install -g @cloudbase/cli
5. 登录云开发
tcb login
6. 在弹出的页面中单击确认授权进行授权
7. 执行以下命令,把public文件夹部署到云服务器上(把EnvID换成刚刚的环境ID)
cloudbase hosting deploy ./public -e EnvID
8.登录云开发控制台
进入静态网站托管页面,可以找到默认的域名,单击域名,就可以看到你的博客已经部署成功了。
下面就是自动生成的域名
出现如下界面表明创建成功了
使用Github进行托管
这个方法是给可以访问github的同学准备的,首先你需要新建一个github仓库,名字无所谓。
然后在命令后中进行操作
1.在命令行中进行git初始化
这步我们已经做过了,当然了,再做一次也没关系
git init
2. 检查是否有改变
git status
3. 提交到暂存区
git add .
4. 交到版本库
git commit -m "msg"
5. 创建分支
git branch -M maingit remote add origin https://.....git
6. 推送到远程仓库
git push -u origin main
7. 添加gh-pages.yml文件
新建一个文件,在pingfan-blog目录下,名称为**.github**,然后在.github文件夹下新建一个文件夹workflows,在workflows文件夹下新建一个文件叫gh-pages.yml
总的路径为pingfan-blog/.github/workflows/gh-pages.yml
在gh-pages.yml输入以下内容后保存。
name: github pageson:push:branches:- main # Set a branch to deploypull_request:jobs:deploy:runs-on: ubuntu-20.04steps:- uses: actions/checkout@v2with:submodules: true # Fetch Hugo themes (true OR recursive)fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod- name: Setup Hugouses: peaceiris/actions-hugo@v2with:hugo-version: 'latest'# extended: true- name: Buildrun: hugo --minify- name: Deployuses: peaceiris/actions-gh-pages@v3if: github.ref == 'refs/heads/main'with:github_token: ${{secrets.GITHUB_TOKEN }}publish_dir: ./public
8. 重新把修改过的文件上传到github上
再走一遍
git status git add .git commit -m "add yml file"git push
9. 成功的话,我们会发现所有的内容都上传到github了
10. 找到刚刚的github仓库,点击Actions,就可以看到我们的网站部署成功了
11. 修改branch为gh-pages,位置在settings->Pages那里
11. 最后一步,修改hugo的baseURL
在github的仓库中找到Settings->Pages,找到为https://******.github.io/pingfan-blog
复制粘贴,打开config.toml,然后替换掉原先的。
12. 再走一遍
git status git add .git commit -m "revise config"git push
13. 打开github,点开pages,点击sourse,选择gh-pages,结束
我这个是换成了我自己购买的域名,所以会显示的不一样,你也可以买一个自己喜欢的域名,而不是默认的域名。
这是我的域名。
如果有问题,可以加这个群,有空我会看的。
群号:339309252
或者扫这个:QQ群
如何零基础零费用的在30分钟内用hugo+github pages创建一个专属于你的个人博客 - 简单快捷到建议人手一个