个人主页与博客搭建记录(上篇)

最近把 个人主页博客 都重新设计了,所以就打算写个总结,自己记录一下一些细节。计划分上、下两篇,上篇介绍域名与解析、个人主页设计等内容,下篇介绍博客的搭建与个性化修改。

虽然自认为不会有几个访客,但还是进行了相应的区别定位。个人主页主要是展现个人的简历、研究项目等内容,主要是个人展示目的;博客偏向于个性化一些,主要想进行一些生活日常或者研究过程等记录,也可以展现一些自己的兴趣爱好之类的东西。

目前的个人主页与博客都放在了 GitHub Pages 上面,个人主页是基于 Bootstrap Freelancer 进行的魔改;而博客则是基于被广泛采用的 Hexo NexT 主题,并做了少量的修改。因为不是程序员,所以很多的处理可能不算是那么专业,但是基本上达到了个人的需求。

注意: 本文是建立在已经会使用 GitHub 网页或者 GitHub Desktop 客户端进行 create repository 与 commit ,以及初始化 GitHub Pages 等基本操作基础之上的。参考:如何在 GitHub 建立个人主页和项目演示页面

提示: 本文的所有操作均基于 macOS High Sierra 系统,以 Sublime 为编辑器,并使用GitHub Desktop 客户端或者 macOS Terminal 对我的 repository 进行 commit 操作。

1. 域名与解析

域名最开始是在 Godaddy 上买的,后来因为 Godaddy 没有免费的域名隐私保护功能,域名一购买就会收到大量的垃圾广告邮件,所以就转到了 NameSilo 上。购买到合适的域名之后,就需要把网站通过 DNS 解析到对应的域名上,我的网站 DNS 解析由 Cloudflare 提供。当然我们也可以选择阿里云、腾讯云等中国本土的云计算服务商提供的免费云解析服务,这样一定程度上可以加快中国大陆访问时候的解析速度,但是值得注意的是我们需要先对账号进行实名认证(域名无须备案)。

1.1 DNS 解析

解析的设置很简单,首先在 GitHub 相应的 repository 根目录中上传一个没有任何后缀名CNAME 文件,并在其中填入一行域名。这个域名可以是根域名,也可是一个二级域名,但是不需要有 http:// 或者 https:// 这样的前缀。例如,我在个人主页项目中的 CNAME 是根域名:

1
dongleizhang.com

而在博客项目中的 CNAME 是一个二级域名:

1
blog.dongleizhang.com

在 repository 根目录中正确放置好 CNAME 文件后,去 Cloudflare 设置 DNS 解析。

根据 GitHub 提供的 ip 地址,设置四条 A 记录,并设置两条 CNAME 记录。这里 A 记录的 Name 是根域名,指向四个 GitHub 提供的 ip 地址,这样直接采用 dongleizhang.com 就可以访问站点。同时,增加一条 Namewww 的 CNAME 记录,value 是 GitHub 个人主页项目的名称 [github-username].github.io,这样访问 www.dongleizhang.com 将会被指向根域名 dongleizhang.com;另外添加一条 valueblog 的 CNAME 记录,这样建立在 GitHub 中 repository 名称为 blog 的博客页面就可以通过二级域名 blog.dongleizhang.com 进行访问。

事实上,设置后还可以通过 [github-username].github.io 访问个人主页,通过 [github-username].github.io/blog 或者 dongleizhang.com/blog 访问博客页面。

提示: 这里我没有把 Status 设为橙色的云朵,即不需要令所有的访问通过 Cloudflare 进行强制 HTTPS,我直接采用了 GitHub Pages 提供的强制 HTTPS 服务,由 Let’s Encrypt 颁发免费 SSL 证书。

设置好 DNS 解析后,还需要在域名注册商处把域名指向解析服务器才可以正常访问。在域名注册商 NameSilo 的管理界面(Domain Manager)选择自己的域名,点击 Change Nameservers,填入 Cloudflare 提供的两个 NameServer 地址:noel.ns.cloudflare.comsandy.ns.cloudflare.com。正确设置好以后,通常需要 24 小时的时间实现全球解析生效,因此可能要耐心等待。

1.2 开启强制 HTTPS

现在越来越多网站开始采用 HTTPS,特别是在用 Chrome 访问时可以在地址栏看到一把小绿锁,看起来就显得高大上;而且采用 HTTPS 可以使得浏览数据更加安全,并防止网络运营商对网页进行劫持和插入广告。由于 GitHub Pages 已经于 2018 年 5 月开始支持为自定义域名开启强制 HTTPS,所以在设置上十分简单。只需要在 repository 的页面点击 Settings,在 GitHub Pages 下面把 Enforce HTTPS 打勾即可。

如果提示 DNS 配置有误而无法开启,可能需要回去检查上述设置是否正确;如果提示因为证书正在颁发还未能开启,可能需要等待至多 24 小时的时间。如果在处理完毕上述的几种情况后依然出现无法给 Enforce HTTPS 打勾的情况,可以 写信联络 GitHub,说明具体情况,通常会在很短时间内给予答复和解决。

2. 个人主页的魔改

个人主页因为基于最初的模板已经更动很大了,比如增加了一些功能,也删减了部分我不需要的功能,堪称「魔改」。所以已经无法一一还原修改的细节,只能列举几点。需要参考我的主页设计进行「二次魔改」直接去 fork 我的 repository,然后修改对应的 .html 文件就好。

目前个人主页的结构是首页(landing page)与 404 页放置于根目录,其他三个子页面(about、research、misc)以及其中的文件等均分别放置于二级目录中,各个网页之间的链接均是相对路径的形式。图片、css、js 等文件均分别放置于根目录下的 imagescssjs 三个文件夹中。

2.1 中文字体的优化

原始的主题没有加入中文字体,一开始我在 macOS 上修改的时候并没有发现问题(大概因为都自动显示为默认苹方字体了),但是在 Windows 系统上就很容易发现所有的中文汉字都变成了宋体,这对于一个强迫症而言是绝对不能忍的。于是,我把 freelancer.css 里面所有的 font-family 都添加上了微软雅黑等字体,这样就变成了:

1
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;

2.2 设置 favicon

在浏览网页时候可以关注到在标签栏、地址栏或者网页收藏夹可以看到网页的 logo 图标,要让自己的网站也能显示这样的效果,就需要进行相关的配置,而且要根据不同的设备进行不同的设置。

只需要使用 RealFaviconGenerator 网页,把自己的图标图片上传,根据提示对不同的设备进行设置,就可以自动生成一个 favicon 图标压缩包和配置代码。下载并解压图标压缩包放到网站相应图片目录,然后把下载图标页面中提供的代码放在每个 .html 文件的 </head> 之前(注意链接路径要与实际图标路径一致)。

1
2
3
4
5
6
7
8
9
10
<!-- Favicon Set -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="manifest" href="/img/icons/site.webmanifest">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4272c5">
<link rel="shortcut icon" href="/img/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
<meta name="theme-color" content="#4272c5">

2.3 移动端的简易适配

虽然网站模板已经为移动端浏览就行了适配,但是有些网页内容依然需要进一步的适配,使得手机用户也能够浏览排版合适的网页。举一个例子,在设置首页(landing page)的背景图片时候注意到,图片无法在小屏幕上适应性缩小,看起来不是很好看。这里采用一个判断语句,使得网页在移动端和非移动端显示不一样的排版布局。其中 if 的条件如果成立,表示设备不是移动端,执行后面的语句,否则执行 else 后面的语句以适配移动端的浏览环境。

1
2
3
4
5
6
7
8
<script type="text/javascript">
if (!(navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry|Windows Phone|webOS)/i))) {
document.write('<style>body {background: url("/img/background.jpg") no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;background-position: 0px -5px;-o-background-size: cover;}</style>');
}
else{
document.write('<style>body {background: no-repeat center center fixed;background-color: #000;}</style><img src="/img/background.jpg" alt="background" align="center" style="width: 100%; height: 100%" vspace="50">');
}
</script>

2.4 本地调试

在修改调整的网页过程中,不可能每次都更新到 GitHub 上面,然后查看实际效果。所以,这里利用 macOS 自带的 Apache 服务器,就可以在本地预览修改效果。

在终端 Terminal 中输入以下的第一行命令,然后输入系统密码(输入时不会显示输入状态)按下回车键 return,就可以启动 Apache 服务器。在浏览器中输入 localhost 即可看到 “It works!” 的提示。恭喜,Apache 启动成功了,这样把网站文件放到放到 /Library/WebServer/Documents/ 下就行。如果需要停止 Apache 服务器,只需要输入以下的第二行命令即可。

1
2
sudo apachectl start 	#start Apache
sudo apachectl stop #stop Apache

但是有时候觉得把文件放到上述目录不是很方便,那么就需要修改默认部署路径。打开 Finder > Go > Go to Folder...(或者按下组合键 shift + cmd + G),然后输入 /etc/apache2/,在该目录下找到 httpd.conf,使用编辑器打开。找到以下两条命令:

1
2
3
DocumentRoot "/Library/WebServer/Documents"

<Directory "/Library/WebServer/Documents">

在两句命令前面均加上 # 将其注释掉,然后加入两条相似的命令,命令中将路径改为自定义的目录并保存。保存后需要重新启动 Apache 服务器,在终端 Terminal 中输入以下命令:

1
sudo apachectl restart 	#restart Apache

如果修改部署路径后,发现浏览器提示没有权限获取,可以检查一下自定义部署路径文件夹及其上级文件夹对于 everyone 用户是否是 No Access 的权限(右键文件夹,点击 Get Info 查看),只需改成 Read Only 的权限后再次尝试即可。

赞赏一下吧~ 还可以关注公众号订阅最新内容

0%