關於 BRIK

進入 BRIK 官網後，你可以發現右上角有「GALLERY」、「JOB」、「PORTFOLIO」、「PRODUCTION」四種服務，這四種分別是：

• GALLERY：列出 BRIK 蒐集的所有網頁，目前多達 6000 個
• JOB：提供就職服務、企業媒合（Web 及設計相關）
• PORTFOLIO：履歷表（作品集）產生
• PRODUCTION：企業探索

除了就職服務外，我們最常用的應該會是 GALLERY 和 PORTFOLIO，不過使用 PORTFOLIO 產生個人化履歷需要先登入帳號，建議會先註冊一個，而且有帳號之後可以在 GALLERY 標記自己曾經按讚過的作品、並且記錄下來，所以有個帳號其實是非常方便的，註冊過後四種服務也都能通用。

註冊 BRIK 帳號

礙於不是每個人都會日文，所以這邊簡單跑個註冊流程給大家看。另外註冊不需要輸入日本地址及日本門號，像我就是直接打台灣的手機號碼，也是順利註冊成功。

1. 前往 BRIK，點右上方的「新規登録」

網址：https://brik.co.jp/

2. 選擇登入方式

上方的是使用第三方帳號註冊：Facebook、google，下方則是輸入個人信箱及密碼註冊。

3. 點選新規登入

要註冊請點選新規登入、下面的按鈕是給已經持有帳號者按的。

4. 填入基本資料

這邊如果看不懂，直接在網頁上點選右鍵翻譯成中文。

因為有好幾頁，如果你沒有要用履歷表服務的話隨便打就好，未來也可以在個人頁修改。

5. 信箱驗證

全部完成後開啟剛剛註冊的信箱，會收到一封「ユーザ登録完了のお願い」的確認信，點選裡面的第一個連結就驗證完成囉。

有了帳號後，我們來看看 BRIK 提供的服務吧！

BRIK GALLERY

在 BRIK GALLERY 中，目前發文的時間已有 6,000 多個作品在上面，官網表示這個數量每日都會增加。在這邊除了隨意逛逛外，也可以透過搜尋或是分類來尋找自己喜歡的作品類型。你可以透過 INDUSTRY、TYPE、COLOR、DESIGN 四種分類來尋找，這邊看不懂日文的可以直接右鍵翻譯。

在作品底下有個 Detail 按鈕，可以看到作品日期、tag、縮圖等概覽等。BRIK GALLERY 內的網頁作品都以日本網頁為主，當中的分類我最喜歡使用「日本テイスト」，也就是日式風格。

這些作品融合了日本獨特的美學元素，讓人能夠感受到日本文化的魅力和獨特之處。不管是食物、旅遊、工藝等都充分展現了日本獨特的設計風格，再加上網頁上的互動和視覺的吸引，讓人邊逛網站邊嘖嘖稱奇。

你可能會好奇這些作品是哪來的，其實在上面有個「推薦」按鈕，你可以投稿自己喜歡的網站、或是自己的作品，BRIK 在審查作品內容、品質等方面是否符合要求，通過後就會放到 BRIK GALLERY 上面。

這麼多作品，我要怎麼看？

如果你覺得作品太多，就算分類了也不知道從何看起的話，在網站內有個 tips 專區，會放上官方撰寫的文章。

例如這篇「不動産・建築系のWebサイト｜優れたデザイン 23選 [BRIK GALLERY特集]」，選出了 23 個優秀的不動產相關的網頁，同時簡單講解各個網站的特色等等。除此之外還有介紹 WEB 工程師、或是 UIUX 設計師轉職的要點、找工作的眉角等等，是個含金量非常高的部落格。

BRIK PORTFOLIO

接著是可以用個人資料產出履歷表的 BRIK PORTFOLIO，可以點我看範例。

裡面的個人項目、作品列表都可以在個人頁面編輯，會直接反映到這份履歷表上，其實就跟 104 差不多，不過我個人更喜歡 BRIK PORTFOLIO 的風格，看起來簡單明瞭、下面的作品分類也可以透過切換來更改，作品連結也可以放上 Notion、Pinterest、Github 等，非常多元。

只要這邊有公開履歷，就有可能會收到來自企業的信件，所以如果你不想要公開的話，可以替自己的履歷表加上密碼，只有持有密碼才可以打開這份履歷。

如何設定密碼

首先點選網頁右上方頭像，接著點「ポートフォリオの編集」，網頁往下拉會看到「パスワード認証」的區塊。

把「パスワード認証を設定する」項目勾選，代表這份履歷需要密碼才可以瀏覽，接著在下方打入要設定的密碼後就完成囉，設定完成後可以打開無痕瀏覽器看看有沒有成功。

BRIK GALLERY 對前端工程師和設計師帶來說是個非常棒資源，這個平台不僅好用，而且作品也讓人驚豔。這些作品幾乎都是來自日本的網站，不論是簡潔俐落的排版、精心挑選的色彩搭配，還是豐富的互動體驗，每個作品都散發著獨特的魅力，讓人留下深刻的印象。對於那些渴望深入瞭解和觀察日本網頁設計的朋友們來說，BRIK 絕對是一個實用的平台。

這篇文章 探索 BRIK GALLERY：日本網頁設計作品的最大規模集結平台 最早出現於 宅男阿西。

即使網站人氣不夠高，我仍然在這段時間學到了不少東西，這篇就來跟正在看文章的你一起來分享。

網站經營有秘訣嗎

網站經營只有一個祕訣，就是「堅持」。

不斷的研究、最佳化、充實內容，這些事情背後靠的都是堅持。剛開始經營網站時一定會覺得：我已經努力一段時間了，怎麼流量還是很低，文章都沒有人看…。背後的原因不是不夠努力、而是努力的不夠久。在 Google 正式收錄你的內容後，請給他時間進行發酵，你可以等幾個禮拜、甚至是幾個月後再回頭來看文章排名、後續針對其他不足的地方來進行調整。

順便分享社會改革家 Jacob August Riis 的名言，這段話也被掛在美國職籃 NBA 聖安東尼奧馬刺隊的休息室中。

「當一切努力看似無用，我會去看石匠敲打石頭。可能敲了一百下，石頭上連一條裂縫都沒有，但就在第一百零一下，石頭斷裂為兩半。然後我了解到，把石頭劈成兩半的不是最後那一下，而是先前的每一次敲擊。」 – Jacob August Riis

賺錢很好，沒有也沒關係

大家都希望靠著網站經營賺進大把的鈔票、流量，但靠著網站經營來賺大錢真的不是一件容易的事。尤其在初期經營網站時，請先把錢的事情拋到腦後，流量變現是我們未來才需要思考的事情，當前應該要學的是如何提供優質且有用的內容、想辦法將網站排名提升。

當然如果你跟我一樣申請 Google Adsense 通過後，也可以在網站上放廣告增加收入，但切記不要放好放滿。廣告雖然能替你增加收入，但卻會讓使用者體驗變差、同時網站速度也會跟著降低，這真的不是一件好事。

當然也不一定要透過放置廣告的方式賺錢，也可以嘗試用很紅的聯盟行銷來替你增加收入。

可以的話，不要只做網站經營

除了靠 SEO 引進的自然搜尋流量外，也可以嘗試經營其他粉絲專頁，例如 Facebook、Instagram 等平台來推廣自己用心產出的作品，當然前提是要有餘力來做這些事情。

像是我建了粉專後、發幾篇文就開始擺爛了，不過偶爾都會看到有少量的流量從粉專頁進來，代表確實有增加曝光的效果。不過如果你跟我一樣沒辦法把兩邊都做好的話，還是乖乖的經營網站就好了，免得到最後變成兩邊都擺爛，那可就不好了。

從每天寫一點點文章開始

網站經營最怕的就是中途放棄，讓網站長時間沒有推出新內容。上面提到我自己有好一段時間沒更新，後來在閱讀「原子習慣」後，我把寫作模式改為每天寫一點點，即使一天只有寫兩句話。

如果每三天要產出一篇文章會讓你覺得很痛苦，那就一個禮拜產出一篇；如果一個禮拜產出一篇也很痛苦，可以試著將文章字數縮短，每天寫個幾段話，最後做完修飾後就能拼出一篇文章。除此之外，想辦法讓經營網站這件事情變得快樂，讓它變得更有吸引力，在這過程中也會慢慢形成一種習慣。

至於原子習慣這本書，如果你有興趣的話可以在博客來、實體書局或是其他平台購買，或是 蝦皮拍賣 上也有不少二手書，可以省一點點小錢。

試著學一點 HTML 和 CSS

如果你對他們有興趣可能會往更進階的方向學習，例如 JavsScript 或是 UIUX 等其他知識，理解的越多對網站前端的掌握度也就越高，遇到不滿意的排滿也能自己解決。

瞄準長尾關鍵字

「長尾關鍵字」指的是搜尋量低、但搜尋字組精確的詞組，例如「新北 日文家教 便宜」、「保溫瓶 耐用 黑色」這類詞組，搜尋量會比核心關鍵字「日文家教」、「保溫瓶」低上許多。長尾關鍵字除了能精準地找到受眾，因為搜尋量低的關係、競爭對手也較少，對於網站經營來說是很棒的選擇。

要找到長尾關鍵字，你可以從 Google Ads 中的關鍵字規劃、Unersuggest、Search Console 等工具搜尋，可以看到搜尋結果所提供的其他字組，重點是上面三個都是免費的，水啦。

使用 GTM 自訂事件

分析網站除了用 Google Analytics、Search Console 以外，同時也可以配合 Google Tag Manager（GTM）來進一步觀察網站來訪者的行為，例如可以使用 GTM 來觀察使用者在畫面上滾動了幾 %、或是點擊了畫面上的哪個按鈕等等，這些事件可以回傳到 Google Analytics，讓我們做進一步的網站分析。

如果你的網站有下廣告，也可以使用他們提供的 Pixel 埋在 GTM 中，例如 Facebook、Dcard，將這些程式碼做整合。

加上結構化標記

文章產出後，當然希望在搜尋結果上有漂亮且大面積的版面，這時候可以利用 Google 搜尋支援的結構化資料標記，對於網站經營來說效果非常不錯。可以看到搜尋結果有超過數十種，你可以在左側選擇適合文章的功能，裡面都有詳盡的介紹。

個人都使用 JSON-LD 格式來添加至文章中，只要在編輯器中使用自定義 HTML 並將 JSON 檔貼到裡面即可，乾淨又衛生。

網站經營是一件不容易的事情，希望大家都能找到適合自己的主題，引進滿滿的流量，我能提供給大家的意見就只有這些了，也希望自己明年發第三年回顧文的時候已經網站已經有個不錯的成績！我們下篇文章見！

這篇文章 網站經營心得，經營兩年我學到的事情 最早出現於 宅男阿西。

• 抓取 DOM
• 監聽輸入內容
• 使用 autolinker 並輸出

建立 HTML 並抓 DOM

HTML 結構非常單純：

<div class="container">
  <h2>輸出結果</h2>
  <p class="result-text"></p>
</div>

<hr>

<textarea placeholder="請輸入聊天內容"></textarea>

const resultText = document.querySelector('.result-text') as HTMLParagraphElement
const textarea = document.querySelector('textarea')! as HTMLTextAreaElement

監聽 textarea

textarea.addEventListener('keypress', (e: KeyboardEvent) => {
  const { keyCode } = e;

  if (keyCode === 13) {
    // 幫我添加連結
  }
})

使用 autolinker 增加連結

使用 autolinker 之前記得先安裝，我是用 npm，所以打：

npm install autolinker --save

並且引入套件：

import Autolinker from 'autolinker';

再寫一個 function 來處理連結：

function addLink<T extends string>(text: T): T {
  const linkText = Autolinker.link(text, {
    newWindow: true,
    sanitizeHtml: true
  })

  return linkText as T;
}

所以回到 textarea 的事件監聽裡，我們把程式碼補上：

if (keyCode === 13) {
  // 塞到畫面上
  resultText.innerHTML = addLink(textarea.value); 
  // 清空輸入內容
  textarea.value = '';
  // 避免按 enter 後換行
  e.preventDefault();
}

完成結果如下：

XSS 的問題

const linkText = Autolinker.link(text, {
  newWindow: true,
  sanitizeHtml: true
})

autolinker 還有其他不少功能，在這個範例中並沒有用到，其他功能可以到 Github 看他們的文檔。

這篇文章 替留言板或聊天室增加超連結（autolinker） 最早出現於 宅男阿西。

為什麼想經營部落格

在經營部落格之前我曾經短暫接觸過數位行銷，當中的 SEO 是我比較感興趣的一塊，也曾經找過不少專職 SEO 的職缺但始終連面試機會都拿不到，因為太菜又沒經驗。左思右想後決定經營自己的部落格，這才是最快的學習方式。

雖然到最後這個部落格還是不怎麼樣，但至少宅男阿西也陪了我一年多的時光，且我從經營部落格當中不只是學到了 SEO，更接觸到了許多不同面向的事物。

這一年內我的部落格經歷了什麼？

2021/03 月開始，把網站的 GA、Search Console、GTM 等工具串起來後，就開始很認真的寫部落格及規劃網站，包含了未來要經營的主題、以及 WordPress 外掛等，當然一開始網站就像坨屎，一天只有 3 個人進來網站，其中有 1 個人還是我自己，

一天有 5 個人進來就要偷笑了，這時候我也開學習 SEO 的各種知識，到 2021/05 左右時累積了近 15 篇文章，這時候神奇的事情發生了。

對於剛開始經營部落格的我來說，突然看到 Sitelinks 真的是爽翻了，也讓我有繼續努力的動力，不過當時還是很可憐的每天只有 10 人左右造訪我的網站。

「寫文章累積成就感很爽，但如果能賺錢我會更爽。」

秉持著這個精神，在 2021/06 時我向 Google 申請了 Adsense (置入廣告)，本來有點擔心會不會文章太少或是網站品質不好沒通過審核，幸好一切順利，在申請的幾天後就收到了審核通過的通知信。

雖然想獲得廣告收入，但我又不希望自己的部落格向某些部落格一樣，滑下去滿滿的都是廣告，到底我是來看文章還是來看廣告啊！所以我只在側邊欄放一則、長篇文章放一至兩則，以不影響文章體驗為主，畢竟我自己看到太多置入會想直接離開，不希望自己的部落格變成那樣。隔了一個月後我發現有聯盟行銷這種東西可以賺錢，所以向蝦皮申請並附上自己的網站，沒什麼意外也是通過申請，不過我到現在還沒有寫過一次聯盟行銷的文章 XD，只有稍微研究一下，從這時候開始也對經營部落格心得有了點想法。

再隔了一個月，工作上的問題讓我沒辦法持續穩定的發文了，在這之前我盡量維持每個禮拜發一篇，每篇都要用心排版且推薦自己喜歡、有興趣的主題，不過這時開始時實在是沒那麼多時間了、另一方面也在替自己找藉口。

「我都那麼忙了，少寫幾篇沒關係吧？」

抱持著這個心態，2021/08 – 2022/04 我只寫了 5 篇文章，且文章的品質都不夠好，導致網站流量始終起不來，更別說 Google Adsense 了，然後…就沒有然後了，之後在經營上也非常散漫，東西要寫不寫的、不然就是寫一半就沒有繼續了，實在是很母湯。

那這一年內部落格成長了多少 ？

這邊直接分享「宅男阿西」這個部落格的 Search Console。

如果你有看過別人的數據，會發現我的數據並不漂亮，曝光跟點擊都非常低，甚至在 2021/11 左右就沒什麼成長了，確實這個期間開始我寫文章的頻率變得極低，導致部落格成長速度緩慢，這也應證了寫文章這件事情並須長期維持。當然並不是說有寫就好，還必須兼顧到部落格最重要的重點 – SEO。

要寫出高品質的文章必須要規劃關鍵字、分析過往數據等，這些都必須要投入不少時間，當然付出的心血會完整呈現在你的數據上，看著流量逐漸累積也會漸漸地有成就感。看著 10 月開始的流量，總覺得部落格再向我哭泣，要多發文餵我的部落格了 XD。

在 Google Analytics 中，我的網站平均閱讀時間為 2 分多鐘，以文章型網站來說不太理想，且近幾個月閱讀時間逐漸下降中，這也是我努力的目標之一。

另外不知道 Search Console 是什麼的朋友可以參考 Google 的官方說明。

有更有趣的成果可以看嗎

當然有！成果除了數據外，就是 Google 上有趣的 SEO 成果了。

以上面兩篇日本搜尋引擎及日本網頁設計來當例子，左邊的文章中我使用了表格呈現數據，所以在下面出現了表格的欄位。右邊的則是放入大量的特色網站連結，多了許多圖片讓搜尋版位變得美美的，又或是偶爾會出現下面這種精選摘要。

當然排名往下掉，或是突然被屌打都是常有的事情，這時候就必須看看衝上來的競爭對手是如何撰寫文章，或是多了什麼自己沒有的資料等。

所以我經營部落格賺了多少錢

這個問題想必是大家最想問的，但我只能老實回答：「沒賺。」

對我來說要從經營部落格中獲取收益是一件非常困難的事情，加上我自己一直非常佛系在經營，從 Google Adsense 那邊獲取的收益也是少得可憐，也沒在玩聯盟行銷，自然沒有拿到什麼錢錢，要付主機和網域的錢都要自掏腰包了。

當然我相信能夠靠部落格養活自己的人大有人在，不過那個人不是我，所以這些心得我就不廢話了 XD。

經營部落格有什麼好處

經營部落格可以讓你學到各式各樣的知識，為了架起網站，你會開始找適合自己的平台如 WordPress、同時也會學習到不少主機及網域相關知識。為了讓自己的網站更好看、你還會學習簡單的 HTML / CSS 以及設計，同時也會接觸到數位行銷及數據分析、了解 SEO 是什麼樣的存在，也會持續發想文章的主題。

當然經營到後期，網站流量大了也能利用網站賺點小錢。如果你和我一樣只是個小小上班族，這個部落格也能拿來當作你的面試作品，證明你在研究方面是很有毅力的。還有好多好多好多好多的優點我一時沒想到，總而言之如果你有這個打算，趕快先爬文看看如何開始自己的部落格吧。

最後的建議

雖然我並不是經營了幾十年的部落格老手，但仍有幾個實用建議想對剛加入的朋友們說：

不要把賺錢當目標

剛起步的部落格絕對賺不了多少錢，如果把這個當目標會讓你迷失方向，應該等到穩定起來後再來思考這件事情。

偶爾寫自己感興趣的文章

不少人都會推薦決定主題後，應該盡量將大方向朝向部落格主題。我個人反而認為部落格內要有一部分是專門寫自己的興趣，或是嘗試其他主題的文章，大概是 8 : 2 左右的數量，畢竟一直在單一主題打轉有時候也是會沒靈感的。

經營部落格是馬拉松、不是短跑

這是經營部落格非常重要的一句話，像我自己就是剛開始全力衝刺，等到後面整個軟掉 XD，應該訂個自己能夠接受的範圍，例如 1~2 周產出一篇長文且品質高的文章。

學習一點 HTML / CSS

單純的學 HTML / CSS 能讓你的網站比別人漂亮許多、甚至是屌打，是一項非常棒的投資，而且 HTML / CSS 並不是程式語言，只是單純的語法，所以相對來說非常好學。

以上就是這篇經營部落格一年的小小心得，希望未來能夠持續分享文章，我們下篇文章見！

這篇文章 經營一周年！部落格心得之網站歷程及數據分享 最早出現於 宅男阿西。

講了這麼多，實際的設計稿長成下面這樣子：

這篇簡單紀錄一下學習心得，也把Demo與設計稿放下面：

• DEMO：點我
• 設計稿：點我

強大的Auto Layout 與 Variants

input的樣式修改

有興趣可以參考w3schools所提供的範例。

正規表達式過濾其他格式

const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

或者是利用 new RegExp 來建立也可以。

let re = new RegExp('^09\d{8}$')

接下來就增加判斷式，不符合格式時border變成紅色。

這次的實作心得非常簡短，因為幾乎所有元件都是看著影片跟老師製作，所以其實沒遇到太大的問題，缺點就是大家的作業都長得一樣。這次也抱持著「啊反正我都做設計稿了、不然把它刻出來吧」「啊反正我都刻出來了，不如來寫心得吧」，所以就有了這篇。後續還有很多作業要提交，也會繼續分享心得！

這篇文章 利用Figma製作UI元件 | Form表單篇 最早出現於 宅男阿西。