0%

搭建个人主页和个人博客

疫情在家,生活过于无聊,为了给自己找点事干,于是就搭建了自己的个人主页和博客

个人主页

科大21级前入学的学生网络中心会免费发放300M的服务器,用于搭建个人主页,服务器的地址为home.ustc.edu.cn/~科大邮箱名/

例如http://home.ustc.edu.cn/~zy0119/

校内访问home.ustc.edu.cn会有一定的教程,例如推荐使用File Zilla用于上传文件到服务器,网页内给出了下载链接,下载客户端版本即可

image-20221224150842948

下载完成后,在主机名输入home.ustc.edu.cn,用户名即为科大邮箱名,密码为邮箱密码,即可连接上服务器

建立public_html,之后所有文件均放在该文件夹下

例如:

image-20221224151223130

关于index.html的编写,大家可以去网上找自己喜欢的样式,复制修改即可

个人博客

使用hexo+Github Page+PicGo+购买的域名搭建了自己的博客

第一步 在Github创建仓库

image-20221224151629383

注意,这里的仓库名字一定要是你Github的名字.github.io,问就是我之前没这么弄就失败了

进入仓库后点击Setting再点击Pages,将None换成master,再点击Save。Github将会自动替你创建出一个pages的页面。 如果配置没有问题,大约几分钟之后,yourname.github.io这个网址就可以正常访问了

image-20221224152114233

第二步 hexo的安装

这里默认大家电脑里有node.js了

  • 安装hexo
1
2
npm install -g hexo-cli
hexo -v //查看版本

初始化一个文件夹

1
hexo init MyBlogs
1
2
cd MyBlogs //进入这个MyBlogs文件夹
npm install //安装依赖

在该文件夹下,输入

1
hexo cl && hexo g && hexo s

hexo clhexo cleanhexo ghexo generatehexo shexo server,上述操作可以在本地生成预览,默认是localhost:4000

  • 配置

在站点的配置文件.config.yml中修改depoly

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/USTChandsomeboy/USTChandsomeboy.github.io.git
branch: master

安装deployer

1
npm install hexo-deployer-git --save

输入

1
hexo cl && hexo g && hexo d

hexo dhexo deploy

即可上传到你的仓库,这里默认大家的ssh是配置好的,https://username.github.io可以查看到你的Helloworld博客了

第三步 hexo博客的编写

hexo的博客是用Markdown编写的,真的很友好,常用命令如下:

1
2
3
hexo new "文章"
hexo new post "文章"
hexo new page "页面"

创建一篇文章后,就会自动生成一个.md文件,上方有个头部,是系统配置的

image-20221224154212092

在下面按自己的习惯编写Markdown文件就行了

美化教程看这个链接就可以了next主题优化,需要先下载next的主题

第四步 创建图床

在Github中,创建一个仓库,选择public,随意命名,例如images

在个人设置中

image-20221224154651246

找到Developer settings

image-20221224154732493

然后生成token,记录好你的token

image-20221224154837073

然后下载PicGo,按图中设置,如果没有意外的话,就没有意外了,会自动上传到仓库中

image-20221224154612472

我们还可以在typora中配置自动上传,在设置中按如下配置即可:

image-20221224155226616

点击验证图片上传选项,若失败,则检查端口号是否相同,一般PicGo的端口号都是36677

image-20221224155327164

第五步 购买域名

在阿里云上购买自己的域名,买完后,点击解析,再点击添加记录

image-20221224155554749

image-20221224155647615

最后,我们在我们博客的仓库的settings/pages里面,输入自己的域名就全部完成了

image-20221224155813810

相关文章

next主题优化
hexo基本配置

本地启动

1
hexo cl && hexo g && hexo s

上传

1
hexo cl && hexo g && hexo d