點此回顧上期：上一篇文章/previous post: hello world. AGAIN!

For English go here

碎碎念

  • 因爲服務器到期的原因，我把網站遷移到了 AWS 服務商，不過并沒有把域名也更換服務商，而是在 AWS Route XX 上綁定了一下域名連接到主機而已。沒想到這就引出麻煩了：AWS 也是按域名付費的，而且截至今日我已經被 Bill 兩次 0.5$ 了。雖不多，但是這不就代表我的單個域名 cleoold.com 要被兩間公司收兩次費用嗎？有點坑啊，我還是月底把域名的記錄轉到原來的服務商吧。幸虧我的另一個域名 misaka.co.uk 沒有也轉移到 AWS 上。
  • 還是 AWS。其實最開始我是打算在 Lightsail 上建立此網站的，結果我發現并不能滿足我的需求，故刪除之。但是還有靜態 IP 沒有解綁， 於是造成了所謂的閑置 IP 罰款。時至現在建站短短沒有幾天已經有了 1$ 多的費用了。真的是太……………… 我相信這所謂的 strategy 一定讓了大多數第一次使用 AWS 服務的人遭坑了吧。
  • 暑期就要結束了…………

經過一些波折和功夫，本網站的子頁 —— PIC —— 圖片發表站上綫了。正如其標題，這個網站的目的就是展示和分享圖片。

你可以點擊這裡來訪問這個頁面：PIC :: im cleoold

或者在本網站的任意地方滾到頁首，然後點擊這個圖標：

因爲備用域名的存在，除了此域名，pic.misaka.co.uk 也可以使用。以後關於 PIC 頁的相關重要更新信息會在這個文章中更新。

 

8-4-2019

對於圖片頁基本的設定已經完成了，我導入了圖片鏈接，使在該頁面上點擊的圖片可以跳轉到相應的文章上。以後，瀏覽者不僅可以選擇瀏覽cleoold.com， 也可以選擇在這個子頁面上一次性觀看完所有的精選圖片。只要對某一張精選圖片感興趣，就可以點擊回到這個網站。
相應的精選圖片和連接文章的綁定我會在這個頁面中更新：PIC :: gallery items

 

爲什麽是 WordPress？

的確是由於慣性思維。這個頁面選擇的是 WP 於是在設立子域名的時候就也下意識的選擇了 WP。在頁面基本搭建完成的時候，我發現此網站只有一個主頁，主頁基本都是圖片（甚至連每一張圖片都有單獨的一個頁面）和鏈接（除了上傳 Portfolio 而產生的頁面——大多數被我重定向到主網站了）。因此這樣子有點大材小用；這樣會拖慢服務器運行的速度。於是把現在的 PIC 頁重寫成靜態頁被提上了日程。

 

一些問題

目前套用的主題中， 圖片展示櫃（也就是 Portfolio 插件）有一個問題：

對於不統一的圖片比例，圖片浮動的堆叠會造成圖上的顯示空白，而且看著完全沒有道理。我對網頁技術不怎麽瞭解，現在也沒有能力去看這個插件的原理。所以目前只能在樣式表裡重設這些圖片的高寬來解決這個問題：

/* image grids */
.masonry img {
  object-fit: cover;
  width: 476px;
  height: 268px;
}

我在電腦和手機上都測試了，沒有遇到嚴重的問題。

同時，原主題有一些地方的顔色，樣式等我不是很喜歡，故也進行了調整（比如將原本是白色的部分改成暗色）。同時爲了展現自己的風格，我也加入了一些自己的元素。比如在頁面最開頭的 html 片段裡，加入了這段樣式：

/* custom html area 1 */
.widget_custom_html {
	color: white;
	text-align: center
}

.widget_custom_html a {
	display: inline-block;
	color: #3f52cc;
	width: 13.8em;
	transition: width 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
	-webkit-transition: width 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
}

.widget_custom_html a:hover {
	color: #4897cf;
	width: 17em;
	letter-spacing: 0.5px;
}

就可以實現超鏈接被選中時候的的變色和變寬。讀者可以自行訪問該頁面來查看這個效果。這些設定我想也會遺傳到很遠的將來的靜態頁上。總之，這個頁面已經可以工作了。

順便的，對於主頁面，我也進行了許多的調整，比如標題，導航欄，右側的工具欄等等。

 

Thoughts

  • Since the server was about to expire, I moved the website to AWS Cloud. However I did not transfer in my domain as well. Instead I just hosted my domain on AWS Route XX then linked it to the current IP address. While I never thought there would be problems: AWS bills on the basis of the number of domains and has billed me twice with 0.5$ each. This was not much but I was unsatisfied by this case which implied I had to pay to two different providers separately for one domain. And now I'm thinking to migrate the domain's records back to the previous provider. Was lucky that I did not create one for misaka.co.uk, my another domain, as well.

  • Still AWS. I initially tried creating this website on Lightsail which I then found unable to satisfy my needs and deleted. But the remaining static IP was not automatically unlinked so a fine for an unattached IP was created. Now the bill has increased to 1$ more while this site has lived only for few days. This is too... and I believe this socalled strategy must have cheated most users who used AWS for the first time.

  • Summer is going to end...

The child site of this website PIC is now available after some difficulties and effort. Like its title, the site aims for showcasing and sharing pictures.

You can click this link to go to the site：PIC :: im cleoold

Or you can scroll up to the top of any part of the current website and click this icon:

Thanks to the existence of the secondary domain, this pic.misaka.co.uk can be used as well. From now on, major updates and changes will be posted in this current page.

 

8-4-2019

The basic setup of the PIC site has done. I imported links for images so that they can redirect visitors to corresponding posts on click. From now, besides the regular cleoold.com, users can choose to see all select images at once on this new site. If one is interested in any of them, the visitor can click it to return to this website.
The bindings of featured images and links to posts will be updated here: PIC :: gallery items

 

Why WordPress？

Yes it's inertia. Since this main website was built on WP, I chose WP again when setting up the sub domain. When the page was about to finish, I found the website contains only one homepage, whose contents are almost all pictures (even each one has its own pages) and hyperlinks (portfolio pages created to fill the area, they were redirected to the main website by me). It is a little waste for this and drags the speed of the server. Hence rewriting that page as a static one was scheduled.

 

Issues

In the currently used theme, the image showcase box (the portfolio plugin) has an issue:

For images with different ratios, the stacking of the floating images causes an empty displayed area shown above. This looks unreasonable. I am not quite knowledged in website techs, nor have the ability to check the why of this plugin so I rely on resetting the width and height via stylesheet for now:

/* image grids */
.masonry img {
  object-fit: cover;
  width: 476px;
  height: 268px;
}

Which I tested on both desktop and phone and found no severe problems.

Meanwhile, I disliked the color and style of some pieces of the original theme, hence I edited it (like changing the dark to the bright). Also to show my own style and added some elements of my own. For example, in the html snippet on the top of the site, I added this stylesheet:

/* custom html area 1 */
.widget_custom_html {
	color: white;
	text-align: center
}

.widget_custom_html a {
	display: inline-block;
	color: #3f52cc;
	width: 13.8em;
	transition: width 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
	-webkit-transition: width 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
}

.widget_custom_html a:hover {
	color: #4897cf;
	width: 17em;
	letter-spacing: 0.5px;
}

To achieve the color and width change for hyperlinks on hover. You can go to the site and see the effect yourself. I think they will inherite to the far future static site. All in all, the site is now working.

By the way, for the main page I also made many changes like title, navigation bar, tool bar on the right side and so on.

發表迴響