恩。。。我又開始搭網站了。。

額。。。一年前想搞個個人博客最后弄了半天,知道了很多生成器,就是沒做完網站。。。。

然后這次需要給白墨寫個網站,時間緊任務重。。結果我只用了半天就把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更新的內容有點多,我重新翻譯了部分現在的文檔,寫在這篇文章里
http://www.lxweimin.com/p/d788e4f37ab1

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,868評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,065評論 25 708
  • 壹 骷髏放開了柳云的腳,一晃眼,與柳云合二為一,抖了抖身子,轉過身,多漂亮的...
    柒竅玲瓏閱讀 373評論 0 0
  • 今天真是難過的一天,雨下了一天,等待的兩個筆試雖然都出了結果,但都沒有過。雖然交大的成績69也算是預料中,但比起第...
    秋筱影兒閱讀 405評論 0 0
  • 思路: 這是一個商業軟件。 目標用戶是什么? 產品提供的核心需求是什么? 使用方式是否便捷高效? 競爭力在是什么?...
    AyaLee閱讀 500評論 0 0