恩。。。我又开始搭网站了。。

额。。。一年前想搞个个人博客最后弄了半天,知道了很多生成器,就是没做完网站。。。。

然后这次需要给白墨写个网站,时间紧任务重。。结果我只用了半天就把hello world跑通了。。。

然后大概的结果是这样的,因为是静态网站,所以只要找个地方把文件传上去就行了。。github pages,coding.net,七牛什么的就行,不用花钱。。。但是有个问题就是七牛需要网站域名备份,据说是个坑,担心github姨妈墙。最后选了coding.net。现在看看来好像访问速度有点慢,不过再说吧。

然后就是先在域名提供商买个域名,我在新网买的,然后管理里面添加一个CNAME,地址写coding的地址pages.coding.net,具体的教程可以看这里https://coding.net/help/doc/pages/index.html。然后在coding上项目上传个index.html。就行了。。

然后就是静态网站生成器了。。。有个网站聚合了github上开源的各种生成器https://staticsitegenerators.net/。在上面按照github的star排序,第一个是jekyll,但是实在没接触过ruby,弄了半天也没看懂。。。

然后发现hugo原来排名数上升的第二了。。。就重新开始部署hugo。。。还要先装golang。。。。反正按照教程就行。。。官网是gohugo.io有个不完全的中文翻译http://www.gohugo.org/

然后开发工具发现brackets还是比较好用,vsc和atom感觉都还要学什么的。。。brackets集成实时预览我觉的对于初学者很友好啊。。。不要搞什么的node.js什么的。。

git

然后要重新复习下git。。。这个学了好多次了,但是以为平时不用,所以每次用的时候都要重学。。。。

git其实就是维护一个状态树,每个代码的不同状态都是一个节点,然后可以用指令在各个节点上跳转。

有个软件叫sourcetree我觉得是最直观的,当然和markdown可能差不多,最开始的时候都想有个直观的方式来看到底做了什么,但是用熟了可能最好的方式是双手可以不离开键盘吧= =

基本用法

首先就是

git init 

初始化

然后

git add 

添加到临时存储(不知道正确的说法是什么。。)

然后

git commit 

可以后面加-m ‘ ’ 来添加一个节点,

分支

git checkout -b

可以新建一个分支

建立远程仓库(github什么的)

git remote

可以给当前的git仓库新建一个远程的,还可以用

git remote add origin xxx
                       ^
远程地址,在远程仓库上能查到

来给远程仓库起个名字,但是之前,要生成ssh公钥,然后写到远程仓库上,不然不会让你访问的你可能能明白。

然后用

git push origin xxx 
             ^
本地起的远程仓库的名字

其中xxx可以写成aaa:bbb的形式aaa是本地分支的名字,bbb是远程分支的名字,bbb不写的话会相当于是aaa:aaa没有会新建,aaa不写的话会删除远程仓库的bbb分支

一些git教程

有两个交互类的学习git的地址,我挺喜欢这种的教学的
http://learngitbranching.js.org/
https://try.github.io/levels/1/challenges/1

字体

中文网页字体的排版我已经不想弄明白了,就照着别人怎么做就怎么做吧。。
https://github.com/sofish/typo.css
https://github.com/gaoryrt/websafe-font
https://zhuanlan.zhihu.com/p/20186806
然后有一个我现在还没弄明白,大概就是因为中文字体文件太大了,所以有人写了一个工具分析网页里用的汉字生成一个特殊的字体包来压缩大小,叫字蛛。放在这里吧。

生成器

嗯,然后静态网站生成器这个东西,我用的这个生成器叫hugo。是用go写的,地址是,gohugo.io。然后有一个中文版的,gohugo.org

环境

因为是用go写的时候先装go的环境,然后再安装它自己的环境,然后要设定path,和gopath,如果是麦克的话,可以用homebrew。
然后因为用到很多,命令行的东西,所以,建议装一些增强的命令行工具,比如MAC的iterm2,和PC的cmder。然后需要装git。

new

然后CD到存放网站内容的文件夹,用
hugo new site .
新建一个网站,它会自动生成一些框架,如果想用网上别人发布的主题也可以,然后也可以自己设定样式类型来,自定义网站的样式

各个文件

这里面的archetypes文件夹是用来存放生成md文件的时候,文件对文件头的像是这样


写在这里面的内容会在用hugo生成生成新页面的md文件对时候自动的填充在md文件的最前面

第二个文件夹是用来存放文章内容的,主要是md文件,生成的时候会根据这里面的内容来生成html文件。
第三个文件夹我没用。。。
第四文件夹是用来存放生成样式的,打开以后里面是这样

index.html是主页的html文件,然后第二个文件夹是用来存放,代码片段的,在一些页面内重复出现的,比如说引用的css和js啊,比如说菜单栏导航栏什么的,可以存放在这里面反复使用比如这样



然后hugo对样式的定义主要是这样的,他有section来区分,比如有有对section是表示项目的,有的是blog什么的,每个section,有list和single来显示这个section的列表和每个页面的样子。比如我有个section叫projects,然后我就要在section文件夹下面建一个project的html定义list的样子,然后project文件夹下面新建一个文件叫single,来表示single的页面。然后如果渲染对时候没找到这些文件就会在_default文件夹里面找。

static里面会放引用的css和js、图片什么的。
config.toml里面有整个网站的配置信息。

然后内容搭好以后用
hugo
就可以生成网站了。文件会放在public上面,把这个push到coding或者github上就行了

然后我找了网上的模板mod了一下。

css

可以用.name来选择某一类,#name来选择某一个id,具体的可以百度css选择器。反正我基本上是对着手册写的。。。然后调用了一个animate.css写了一个出现的动画。改了些字号位置什么的。。

jquery

反正就是各种$符号什么的。。然后网上很多库什么的,我主要是用了一个scroolto的库写了一个滚动的功能。然后写了一个滚动到特定位置,就出现特定动画的功能。

然后就基本上写完了。。现在好像也能访问了blankink.cc

shortcode

恩,然后写内容的时候发现有的时候markdown还不能完全做到我想要的功能,所以hugo提供了shortcode来实现这些功能。
http://gohugo.io/extras/shortcodes/
大致的流程就是在layout/shortcodes下面新建html文件,名字类似xxx.html这样,然后就可以{{% xxx %}}这样用了,然后可以传递参数什么的。

2021年5月13日 UPDATE:
最近想做一个个人网站,然后hugo更新的内容有点多,我重新翻译了部分现在的文档,写在这篇文章里
//www.greatytc.com/p/d788e4f37ab1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,561评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,259评论 25 707
  • 壹 骷髅放开了柳云的脚,一晃眼,与柳云合二为一,抖了抖身子,转过身,多漂亮的...
    柒窍玲珑阅读 350评论 0 0
  • 今天真是难过的一天,雨下了一天,等待的两个笔试虽然都出了结果,但都没有过。虽然交大的成绩69也算是预料中,但比起第...
    秋筱影儿阅读 389评论 0 0
  • 思路: 这是一个商业软件。 目标用户是什么? 产品提供的核心需求是什么? 使用方式是否便捷高效? 竞争力在是什么?...
    AyaLee阅读 469评论 0 0