{ "componentChunkName": "component---src-templates-index-js", "path": "/page/2/", "result": {"data":{"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__5e66fb624e433422bb91b3b2","title":"Drawing Pour Over Coffee Set Illustration using Sketch for Mac | Time-lapse Art","slug":"drawing-pour-over-coffee-set-illustration-using-sketch-for-mac-time-lapse-art","featured":false,"feature_image":"https://ghost.woodies11.dev/content/images/2020/03/C4F718F9-8816-4392-BEAB-C64AFAAED698.jpeg","excerpt":"Drawing pour over coffee set in Sketch | Timelapse","custom_excerpt":"Drawing pour over coffee set in Sketch | Timelapse","visibility":"public","created_at_pretty":"10 March, 2020","published_at_pretty":"10 March, 2020","updated_at_pretty":"18 March, 2020","created_at":"2020-03-10T09:28:50.000+07:00","published_at":"2020-03-10T09:30:56.000+07:00","updated_at":"2020-03-18T23:14:32.000+07:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null},"primary_tag":{"name":"arts","slug":"arts","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"arts","slug":"arts","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"design","slug":"design","description":"Design and creative stuffs!","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"video","slug":"video","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"","html":"
","childHtmlRehype":{"html":"
"},"url":"https://ghost.woodies11.dev/drawing-pour-over-coffee-set-illustration-using-sketch-for-mac-time-lapse-art/","canonical_url":null,"uuid":"5e461c88-36d8-4f67-8c64-4f04657d8c21","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5e66fb624e433422bb91b3b2","reading_time":0}},{"node":{"id":"Ghost__Post__5e6647f34e433422bb91b2cc","title":"[Part 2] How to set up your own Ghost + Gatsby blog (with Digital Ocean and Netlify)","slug":"how-to-setup-ghost-netlify-part-2","featured":false,"feature_image":"https://ghost.woodies11.dev/content/images/2020/03/Screen-Shot-2020-03-09-at-23.37.21-1.png","excerpt":"In this part, we will be looking at how to connect Gatsby to our Ghost CMS.","custom_excerpt":"In this part, we will be looking at how to connect Gatsby to our Ghost CMS.","visibility":"public","created_at_pretty":"09 March, 2020","published_at_pretty":"09 March, 2020","updated_at_pretty":"18 March, 2020","created_at":"2020-03-09T20:43:15.000+07:00","published_at":"2020-03-09T23:40:03.000+07:00","updated_at":"2020-03-18T22:54:59.000+07:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null},"primary_tag":{"name":"dev","slug":"dev","description":"Programming, coding, and development related topics.","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"dev","slug":"dev","description":"Programming, coding, and development related topics.","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"tutorials","slug":"tutorials","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"web","slug":"web","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"In this part, we will be looking at how to connect Gatsby to our Ghost CMS.\n\nIf you haven't completed Part 1\n[https://blog.woodies11.dev/how-to-setup-ghost-netlify-part-1] yet, we look at\nhow to host our own Ghost CMS in a Digital Ocean droplet there.\n\nGhost's Gatsby Starter Project\nGhost provides a convenient starter Gatsby project for us to used. You can visit\nthe official GitHub [https://github.com/TryGhost/gatsby-starter-ghost] page or\nclone the repo using this command:\n\ngit clone https://github.com/TryGhost/gatsby-starter-ghost.git\n\nWe will need to do a few configuration here to get our Gatsby connected to our\nGhost in Digital Ocean.\n\nAdd .ghost.json to .gitignore\nFirst, we will add .ghost.json file to .gitignore so git will ignore this file\nfrom commits (make sure hidden files are visible). The file will be where we\nstore our API keys, and it is generally a bad practice to commit these keys to a\nrepo. Instead, we will use ENVIRONMENTAL VARIABLES to store our keys.\n\nYou can either open .gitignore file in a text editor and add the entry that way\nor run this command:\n\necho \"\\n.ghost.json\" >> .gitignore\n\nOptionally, you can create a copy of the file to keep as template: (copy for\nWindows)\n\ncp .ghost.json .ghost.json.template\n\nThe default configuration that come with the starter project is pointing to a\nGhost instance created specifically for starter projects. Thus, you can leave it\nas is for reference. Otherwise, I would remove the values and only leave keys\nfor the template.\n\nLeave the original .ghost.json as is if you want to test or develop Gatsby\nlocally before hosting it on Netlify.\n\nNode JS\nIf you want to run Gatsby on your local machine, either to test or develop\nlocally, make sure you have Node JS and npm or yarn installed first.\n\nInstall dependencies\nMake sure you are in the project's root directory. Then run:\n\nnpm install\n\nOnce that is done, run:\n\nnpm run dev\n\nThis will pull content from gatsby.ghost.io [https://gatsby.ghost.io] which is\nan instance of Ghost hosted for the purpose of this demo project.\n\nOnce completed, you can go to http://localhost:8000 to see your Gatsby project.\n\nNow, let's configure this to pull from the Ghost instance that you set up in \nPart 1 [https://ghost.woodies11.dev/how-to-setup-ghost-netlify-part-1].\n\nFirst, login to the Ghost admin page of your Ghost instance.\n\nThen, click on Integrations > + Add custom integration\n\nName it however you like. I will use Local Dev here because I will only use this\nkey for local development.\n\nTake note of your Content API Key and API URL.\n\nIn your project folder, open up the .ghost.json file (again, make sure hidden\nfiles are shown or use command line to open it).\n\nYou should see something like:\n\nAs you can guess, you want to replace both apiUrl and contentApiKey with the\nvalues you get from your Ghost's admin page.\n\nDo that then save the file.\n\nFinally, run the command below again to see the final result.\n\nnpm run dev\n\n It should now pull from your own Ghost instance.\n\nCongratulation! You have successfully integrated Gatsby with Ghost!\n\nNext, hosting...\nIn Part 3 [https://blog.woodies11.dev/how-to-setup-ghost-netlify-part-3], we\nwill look at how we could host this site on Netlify and create a webhook to tell\nNetlify CI/CD to rebuild our site each time content is updated on Ghost.","html":"

In this part, we will be looking at how to connect Gatsby to our Ghost CMS.

If you haven't completed Part 1 yet, we look at how to host our own Ghost CMS in a Digital Ocean droplet there.

Ghost's Gatsby Starter Project

Ghost provides a convenient starter Gatsby project for us to used. You can visit the official GitHub page or clone the repo using this command:

git clone https://github.com/TryGhost/gatsby-starter-ghost.git

We will need to do a few configuration here to get our Gatsby connected to our Ghost in Digital Ocean.

Add .ghost.json to .gitignore

First, we will add .ghost.json file to .gitignore so git will ignore this file from commits (make sure hidden files are visible). The file will be where we store our API keys, and it is generally a bad practice to commit these keys to a repo. Instead, we will use ENVIRONMENTAL VARIABLES to store our keys.

You can either open .gitignore file in a text editor and add the entry that way or run this command:

echo \"\\n.ghost.json\" >> .gitignore

Optionally, you can create a copy of the file to keep as template: (copy for Windows)

cp .ghost.json .ghost.json.template

The default configuration that come with the starter project is pointing to a Ghost instance created specifically for starter projects. Thus, you can leave it as is for reference. Otherwise, I would remove the values and only leave keys for the template.

Leave the original .ghost.json as is if you want to test or develop Gatsby locally before hosting it on Netlify.

Node JS

If you want to run Gatsby on your local machine, either to test or develop locally, make sure you have Node JS and npm or yarn installed first.

Install dependencies

Make sure you are in the project's root directory. Then run:

npm install

Once that is done, run:

npm run dev

This will pull content from gatsby.ghost.io which is an instance of Ghost hosted for the purpose of this demo project.

Once completed, you can go to http://localhost:8000 to see your Gatsby project.

Now, let's configure this to pull from the Ghost instance that you set up in Part 1.

First, login to the Ghost admin page of your Ghost instance.

Then, click on Integrations > + Add custom integration

Name it however you like. I will use Local Dev here because I will only use this key for local development.

Take note of your Content API Key and API URL.

In your project folder, open up the .ghost.json file (again, make sure hidden files are shown or use command line to open it).

You should see something like:

As you can guess, you want to replace both apiUrl and contentApiKey with the values you get from your Ghost's admin page.

Do that then save the file.

Finally, run the command below again to see the final result.

npm run dev

It should now pull from your own Ghost instance.

Congratulation! You have successfully integrated Gatsby with Ghost!

Next, hosting...

In Part 3, we will look at how we could host this site on Netlify and create a webhook to tell Netlify CI/CD to rebuild our site each time content is updated on Ghost.

","childHtmlRehype":{"html":"

In this part, we will be looking at how to connect Gatsby to our Ghost CMS.

If you haven't completed Part 1 yet, we look at how to host our own Ghost CMS in a Digital Ocean droplet there.

Ghost's Gatsby Starter Project

Ghost provides a convenient starter Gatsby project for us to used. You can visit the official GitHub page or clone the repo using this command:

git clone https://github.com/TryGhost/gatsby-starter-ghost.git

We will need to do a few configuration here to get our Gatsby connected to our Ghost in Digital Ocean.

Add .ghost.json to .gitignore

\"\"

First, we will add .ghost.json file to .gitignore so git will ignore this file from commits (make sure hidden files are visible). The file will be where we store our API keys, and it is generally a bad practice to commit these keys to a repo. Instead, we will use ENVIRONMENTAL VARIABLES to store our keys.

You can either open .gitignore file in a text editor and add the entry that way or run this command:

echo \"\\n.ghost.json\" >> .gitignore

Optionally, you can create a copy of the file to keep as template: (copy for Windows)

cp .ghost.json .ghost.json.template

The default configuration that come with the starter project is pointing to a Ghost instance created specifically for starter projects. Thus, you can leave it as is for reference. Otherwise, I would remove the values and only leave keys for the template.

Leave the original .ghost.json as is if you want to test or develop Gatsby locally before hosting it on Netlify.

Node JS

If you want to run Gatsby on your local machine, either to test or develop locally, make sure you have Node JS and npm or yarn installed first.

Install dependencies

Make sure you are in the project's root directory. Then run:

npm install

Once that is done, run:

npm run dev

This will pull content from gatsby.ghost.io which is an instance of Ghost hosted for the purpose of this demo project.

\"\"

Once completed, you can go to http://localhost:8000 to see your Gatsby project.

\"\"

Now, let's configure this to pull from the Ghost instance that you set up in Part 1.

First, login to the Ghost admin page of your Ghost instance.

Then, click on Integrations > + Add custom integration

\"\"

Name it however you like. I will use Local Dev here because I will only use this key for local development.

\"\"

Take note of your Content API Key and API URL.

\"\"

In your project folder, open up the .ghost.json file (again, make sure hidden files are shown or use command line to open it).

You should see something like:

\"\"

As you can guess, you want to replace both apiUrl and contentApiKey with the values you get from your Ghost's admin page.

Do that then save the file.

Finally, run the command below again to see the final result.

npm run dev

It should now pull from your own Ghost instance.

\"\"

Congratulation! You have successfully integrated Gatsby with Ghost!

Next, hosting...

In Part 3, we will look at how we could host this site on Netlify and create a webhook to tell Netlify CI/CD to rebuild our site each time content is updated on Ghost.

"},"url":"https://ghost.woodies11.dev/how-to-setup-ghost-netlify-part-2/","canonical_url":null,"uuid":"74b4c4d8-6b6f-495b-8ece-b0be27519c5b","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5e6647f34e433422bb91b2cc","reading_time":3}},{"node":{"id":"Ghost__Post__5e64f2ff4e433422bb91b169","title":"What’s on my Home Network","slug":"whats-on-my-home-network","featured":false,"feature_image":"https://ghost.woodies11.dev/content/images/2020/03/DSC01443.jpeg","excerpt":"I have been building and expanding the capability of my home network for the past few months. Here is what I have accumulated so far!","custom_excerpt":"I have been building and expanding the capability of my home network for the past few months. Here is what I have accumulated so far!","visibility":"public","created_at_pretty":"08 March, 2020","published_at_pretty":"08 March, 2020","updated_at_pretty":"10 March, 2020","created_at":"2020-03-08T20:28:31.000+07:00","published_at":"2020-03-08T21:58:50.000+07:00","updated_at":"2020-03-10T09:12:13.000+07:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null},"primary_tag":{"name":"dev","slug":"dev","description":"Programming, coding, and development related topics.","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"dev","slug":"dev","description":"Programming, coding, and development related topics.","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"network","slug":"network","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"\n\n1. Modem\nI reuse an all-in-one D-Link Modem/Router to replace my ISP's Modem. Nothing\nfancy. It just get the job done.\n\n2. TP-Link AC1200 Router\n[https://www.amazon.com/TP-Link-AC1200-Smart-WiFi-Router/dp/B01IUDUJE0/ref=sr_1_2?keywords=tp+link+c1200&qid=1583674561&s=electronics&sr=1-2]\nA budget wireless AC router that perform really well for the price. I will\nlikely upgrade to a better Wi-Fi 6 or Wi-Fi AX router once those become more\nprominent. Otherwise, this router does the job for now.\n\n3. TP-Link 8-Ports Gigabit Switch\n[https://www.amazon.com/Ethernet-Splitter-Optimization-Unmanaged-TL-SG108/dp/B00A121WN6/ref=sr_1_3?crid=F8HVVT9O3F4Q&keywords=tp+link+8+port+gigabit+switch&qid=1583674492&s=electronics&sprefix=tp+link+8+port+gi%2Celectronics%2C405&sr=1-3]\nI never thought I would need to have a switch at home in 2020. After all,\npractically anything is now wireless enabled.\n\nThat is, until I got my next item.\n\n4. Synology DS218 NAS\n[https://www.amazon.com/Synology-bay-DiskStation-DS218-Diskless/dp/B077PJX8TH]\nApple Time Machine has saves me from a brunch of headaches more time than I can\ncount. For the part few years, I have been backing up to my WD My Book 2TB\nthrough USB. It was a very simple process. Everyday when I am back from college,\nI would dock my laptop at my dock and plug the HDD in. TimeMachine would\ncontinue to back up to the drive automatically.\n\nI have since moved to a new condominium and accomulate a few more devices. I\nalso graduated and now working full time. It is sometime hard to remember to\nplug the hard drive in when I have multiple laptops that I switch around to all\nthe time.\n\nI also want to share files quickly between my Gaming PC and my MacBook Pro.\n\nPlus, I just love the idea of a NAS. I have always wanted to play around with\nthese networking stuffs.\n\nSo, I decided that it is time to invest in something more powerful. I wanted to\nstart out with something simple. I tried repurpose an old laptop to run FreeNAS\nbefore but honestly, with something as important as data storage device, I\nrather have something that \"just work\" than saving a few bucks and having to\nspend time troubleshoot later when something go wrong. Thus, I decided to go\nwith a basic Synology D218 2-bays NAS with a 6 TB Seagate IronWolf drive (I do\nplan to add a second later for RAID 1). My local store did not have the D218+\nmodel, so the standard one is what I ended up getting. I will probably make the\njump later on to a 4 or 5 bays one so this will do for now.\n\n5. Raspberry Pi 3b+\n[https://www.amazon.com/Raspberry-Model-2019-Quad-Bluetooth/dp/B07TD42S27/ref=sxin_2_ac_d_pm?ac_md=4-0-VW5kZXIgJDUw-ac_d_pm&cv_ct_cx=raspberry+pi+4&keywords=raspberry+pi+4&pd_rd_i=B07TD42S27&pd_rd_r=2d71be08-6d83-4ac1-b3e6-35ee0a9fc23c&pd_rd_w=zsPEo&pd_rd_wg=ipBi6&pf_rd_p=0e223c60-bcf8-4663-98f3-da892fbd4372&pf_rd_r=7B8ZMNWH4Y0TVRTRQ1PA&psc=1&qid=1583674606] \n(newer model available) with Pi Hole running on Raspbian Lite\nThis is a recent addition to my network. I stumbled across the Pi-Hole project a\nfew weeks ago and got hooked with the idea of having a dashboard that I can\nmonitor my devices network activities (for absolutely no reason apart from\nbecause I can).\n\n\nIt also have the added benefit of being a DNS sink hole, allowing me to block\nads and websites at a network level.\n\n6. Hue Bridge for Philips Hue\n[https://www.amazon.com/Philips-Hue-Starter-HomeKit-Assistant/dp/B07XH4KDR5/ref=sr_1_1_sspa?crid=2467A8KQWNWCJ&keywords=philips+hue+starter+kit&qid=1583674651&sprefix=Philip+hue+star%2Caps%2C402&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEyREZRMzRZMVlGM1VLJmVuY3J5cHRlZElkPUEwOTIyNzI1MjFVTVNZRTNaVk9MRSZlbmNyeXB0ZWRBZElkPUEwNjE2NDYxTVlaOE5INVJKS09YJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==]\nThe Philips Hue zigbee bridge is required to control Philips Hue lights around\nmy condo. Nothing fancy here.\n\n7. Other wired/wireless clients\nYou know... my smartphones, iPad, laptops, PC, Smart TV, Chromecast, etc.\n\nThe Cupboard:\nOriginally, these devices just sit next to my router. My router is right next to\nmy desk, and in the middle of my living room though. Those HDD sounds from the\nNAS eventually drive me crazy so I moved all these devices into an empty\ncupboard away from my desk. \n\nI will probably get myself a rack someday. For now, they all live here.","html":"

1. Modem

I reuse an all-in-one D-Link Modem/Router to replace my ISP's Modem. Nothing fancy. It just get the job done.

A budget wireless AC router that perform really well for the price. I will likely upgrade to a better Wi-Fi 6 or Wi-Fi AX router once those become more prominent. Otherwise, this router does the job for now.

I never thought I would need to have a switch at home in 2020. After all, practically anything is now wireless enabled.

That is, until I got my next item.

4. Synology DS218 NAS

Apple Time Machine has saves me from a brunch of headaches more time than I can count. For the part few years, I have been backing up to my WD My Book 2TB through USB. It was a very simple process. Everyday when I am back from college, I would dock my laptop at my dock and plug the HDD in. TimeMachine would continue to back up to the drive automatically.

I have since moved to a new condominium and accomulate a few more devices. I also graduated and now working full time. It is sometime hard to remember to plug the hard drive in when I have multiple laptops that I switch around to all the time.

I also want to share files quickly between my Gaming PC and my MacBook Pro.

Plus, I just love the idea of a NAS. I have always wanted to play around with these networking stuffs.

So, I decided that it is time to invest in something more powerful. I wanted to start out with something simple. I tried repurpose an old laptop to run FreeNAS before but honestly, with something as important as data storage device, I rather have something that \"just work\" than saving a few bucks and having to spend time troubleshoot later when something go wrong. Thus, I decided to go with a basic Synology D218 2-bays NAS with a 6 TB Seagate IronWolf drive (I do plan to add a second later for RAID 1). My local store did not have the D218+ model, so the standard one is what I ended up getting. I will probably make the jump later on to a 4 or 5 bays one so this will do for now.

5. Raspberry Pi 3b+ (newer model available) with Pi Hole running on Raspbian Lite

This is a recent addition to my network. I stumbled across the Pi-Hole project a few weeks ago and got hooked with the idea of having a dashboard that I can monitor my devices network activities (for absolutely no reason apart from because I can).

It also have the added benefit of being a DNS sink hole, allowing me to block ads and websites at a network level.

6. Hue Bridge for Philips Hue

The Philips Hue zigbee bridge is required to control Philips Hue lights around my condo. Nothing fancy here.

7. Other wired/wireless clients

You know... my smartphones, iPad, laptops, PC, Smart TV, Chromecast, etc.

The Cupboard:

Originally, these devices just sit next to my router. My router is right next to my desk, and in the middle of my living room though. Those HDD sounds from the NAS eventually drive me crazy so I moved all these devices into an empty cupboard away from my desk.

I will probably get myself a rack someday. For now, they all live here.

","childHtmlRehype":{"html":"

1. Modem

I reuse an all-in-one D-Link Modem/Router to replace my ISP's Modem. Nothing fancy. It just get the job done.

\"\"

A budget wireless AC router that perform really well for the price. I will likely upgrade to a better Wi-Fi 6 or Wi-Fi AX router once those become more prominent. Otherwise, this router does the job for now.

\"\"

I never thought I would need to have a switch at home in 2020. After all, practically anything is now wireless enabled.

That is, until I got my next item.

4. Synology DS218 NAS

\"\"

Apple Time Machine has saves me from a brunch of headaches more time than I can count. For the part few years, I have been backing up to my WD My Book 2TB through USB. It was a very simple process. Everyday when I am back from college, I would dock my laptop at my dock and plug the HDD in. TimeMachine would continue to back up to the drive automatically.

I have since moved to a new condominium and accomulate a few more devices. I also graduated and now working full time. It is sometime hard to remember to plug the hard drive in when I have multiple laptops that I switch around to all the time.

I also want to share files quickly between my Gaming PC and my MacBook Pro.

Plus, I just love the idea of a NAS. I have always wanted to play around with these networking stuffs.

So, I decided that it is time to invest in something more powerful. I wanted to start out with something simple. I tried repurpose an old laptop to run FreeNAS before but honestly, with something as important as data storage device, I rather have something that \"just work\" than saving a few bucks and having to spend time troubleshoot later when something go wrong. Thus, I decided to go with a basic Synology D218 2-bays NAS with a 6 TB Seagate IronWolf drive (I do plan to add a second later for RAID 1). My local store did not have the D218+ model, so the standard one is what I ended up getting. I will probably make the jump later on to a 4 or 5 bays one so this will do for now.

5. Raspberry Pi 3b+ (newer model available) with Pi Hole running on Raspbian Lite

\"\"

This is a recent addition to my network. I stumbled across the Pi-Hole project a few weeks ago and got hooked with the idea of having a dashboard that I can monitor my devices network activities (for absolutely no reason apart from because I can).

It also have the added benefit of being a DNS sink hole, allowing me to block ads and websites at a network level.

6. Hue Bridge for Philips Hue

The Philips Hue zigbee bridge is required to control Philips Hue lights around my condo. Nothing fancy here.

7. Other wired/wireless clients

You know... my smartphones, iPad, laptops, PC, Smart TV, Chromecast, etc.

The Cupboard:

\"\"

Originally, these devices just sit next to my router. My router is right next to my desk, and in the middle of my living room though. Those HDD sounds from the NAS eventually drive me crazy so I moved all these devices into an empty cupboard away from my desk.

I will probably get myself a rack someday. For now, they all live here.

"},"url":"https://ghost.woodies11.dev/whats-on-my-home-network/","canonical_url":null,"uuid":"866a64d7-0b72-4203-a1de-97aaaee7eb56","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5e64f2ff4e433422bb91b169","reading_time":3}},{"node":{"id":"Ghost__Post__5e64b7d74e433422bb91b12a","title":"[Part 1] How to set up your own Ghost + Gatsby blog (with Digital Ocean and Netlify)","slug":"how-to-setup-ghost-netlify-part-1","featured":true,"feature_image":"https://ghost.woodies11.dev/content/images/2020/03/Screen-Shot-2020-03-08-at-16.25.58.png","excerpt":"How to set up your own fully automated static blog using Ghost and Gatsby with the JAMstack!","custom_excerpt":"How to set up your own fully automated static blog using Ghost and Gatsby with the JAMstack!","visibility":"public","created_at_pretty":"08 March, 2020","published_at_pretty":"08 March, 2020","updated_at_pretty":"18 March, 2020","created_at":"2020-03-08T16:16:07.000+07:00","published_at":"2020-03-08T16:16:48.000+07:00","updated_at":"2020-03-18T22:55:07.000+07:00","meta_title":null,"meta_description":"How to set up Ghost as Headless CMS on Digital Ocean and hook it up to a static site generated by Gatsby on Netlify.","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null},"primary_tag":{"name":"tutorials","slug":"tutorials","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"tutorials","slug":"tutorials","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"dev","slug":"dev","description":"Programming, coding, and development related topics.","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"web","slug":"web","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"Ghost on Digital Ocean Droplet (JAMstack)\nFor now, I am hosting the site on the smallest, and cheapest, Digital Ocean\ndroplet.\n\nFirst, you will want to create a Digital Ocean account\n[https://m.do.co/c/a24e0451905d] (disclosure: referral link).\n\nThen, select Create > Droplets.\n\nWe will be using a template already provided by Digital Ocean, so click on \nMarketplace then See all Marketplace Apps to search all apps.\n\nSearch and select Ghost.\n\nClick on Create Ghost Droplet.\n\nChoose the configuration you want. Since we will be using a static site\ngenerator to generate and host the site elsewhere, the cheapest plan should\nwork. \n\nThis is the beauty of this setup! The CMS, and thus the droplet, is only access\nduring rebuild while another hosting server or a CDN take care of actual user\nload. Therefore, the CMS server can be really small!\n\nPick your datacenter location. Again, since our web hosting will take care of\nthe actual task of serving the site, this doesn't matter much. I live in\nThailand so I picked Singapore. (Though, I should have picked one closer to\nwhere my CI/CD build pipeline will take place...).\n\nPick your authentication method. I recommend using SSH keys if possible. If you\nhave never add an SSH key to your Digital Ocean account, click on New SSH Key \nand follow the instruction to add one.\n\nFinally, click Create Droplet and wait a bit while Digital Ocean is setting up\nyour droplet for the first time.\n\nOnce your droplet is ready, you will get a Public IP Address that you can use to \nSSH into the droplet.\n\nConfiguring Ghost for the First Time\nYou will need to SSH into your droplet once to finish installation.\n\nOn Windows, you can use PuTTY [https://www.putty.org] to establish an ssh\nconnection.\n\nOn a UNIX system (macOS, Linux), ssh should come standard with your shell.\n\nSSH using password\nIf you selected One-time password as your authentication method previously, you\ncan use:\n\nssh root@123.123.123.123\n\nWhere 123.123.123.123 is replaced with your Public IP Address.\n\nIf prompt to trust the certificate, type yes and hit enter.\n\nIt will then ask for password sent to your email. Enter that in.\n\nSSH using SSH Key\nIf you selected SSH Keys as your authentication method, use the following\ncommand instead:\n\nssh -i /path/to/my/key root@123.123.123.123\n\nWhere /path/to/my/key is the path to your private key associated with the public\nkey you configured for this droplet.\n\nAuto Installation\nOnce connected, the shell should automatically finish the installation for you.\n\nYou will be asked to supply a domain name. Do so if you already have one,\notherwise, enter http://. \n\nOnce that is complete, visit http:///ghost, or \nhttps:///ghost if you have a domain, to set up Admin for Ghost\nfor the first time.\n\nUpdating Ghost's base URL after the fact...\nFor those who are impatience (like me) and could not wait until you get your\ndomain name set up and A name to propagete, you can update Ghost's URL after the\nfirst installation by following this guide\n[https://ghost.org/faq/change-configured-site-url/].\n\nNote that, the default installation for Ghost in Digital Ocean's droplet is at \n/var/www/ghost. You will also need to switch to ghost-mgr user using sudo -i -u\nghost-mgr.\n\nSet up Gatsby\nTo be continue in Part 2\n[https://blog.woodies11.dev/how-to-setup-ghost-netlify-part-2]...","html":"

Ghost on Digital Ocean Droplet (JAMstack)

For now, I am hosting the site on the smallest, and cheapest, Digital Ocean droplet.

First, you will want to create a Digital Ocean account (disclosure: referral link).

Then, select Create > Droplets.

We will be using a template already provided by Digital Ocean, so click on Marketplace then See all Marketplace Apps to search all apps.

Search and select Ghost.

Click on Create Ghost Droplet.

Choose the configuration you want. Since we will be using a static site generator to generate and host the site elsewhere, the cheapest plan should work.

This is the beauty of this setup! The CMS, and thus the droplet, is only access during rebuild while another hosting server or a CDN take care of actual user load. Therefore, the CMS server can be really small!

Pick your datacenter location. Again, since our web hosting will take care of the actual task of serving the site, this doesn't matter much. I live in Thailand so I picked Singapore. (Though, I should have picked one closer to where my CI/CD build pipeline will take place...).

Pick your authentication method. I recommend using SSH keys if possible. If you have never add an SSH key to your Digital Ocean account, click on New SSH Key and follow the instruction to add one.

Finally, click Create Droplet and wait a bit while Digital Ocean is setting up your droplet for the first time.

Once your droplet is ready, you will get a Public IP Address that you can use to SSH into the droplet.

Configuring Ghost for the First Time

You will need to SSH into your droplet once to finish installation.

On Windows, you can use PuTTY to establish an ssh connection.

On a UNIX system (macOS, Linux), ssh should come standard with your shell.

SSH using password

If you selected One-time password as your authentication method previously, you can use:

ssh root@123.123.123.123

Where 123.123.123.123 is replaced with your Public IP Address.

If prompt to trust the certificate, type yes and hit enter.

It will then ask for password sent to your email. Enter that in.

SSH using SSH Key

If you selected SSH Keys as your authentication method, use the following command instead:

ssh -i /path/to/my/key root@123.123.123.123

Where /path/to/my/key is the path to your private key associated with the public key you configured for this droplet.

Auto Installation

Once connected, the shell should automatically finish the installation for you.

You will be asked to supply a domain name. Do so if you already have one, otherwise, enter http://<YOUR DROPLET PUBLIC IP>.

Once that is complete, visit http://<YOUR DROPLET PUBLIC IP>/ghost, or https://<YOUR DOMAIN NAME>/ghost if you have a domain, to set up Admin for Ghost for the first time.

Updating Ghost's base URL after the fact...

For those who are impatience (like me) and could not wait until you get your domain name set up and A name to propagete, you can update Ghost's URL after the first installation by following this guide.

Note that, the default installation for Ghost in Digital Ocean's droplet is at /var/www/ghost. You will also need to switch to ghost-mgr user using sudo -i -u ghost-mgr.

Set up Gatsby

To be continue in Part 2...

","childHtmlRehype":{"html":"

Ghost on Digital Ocean Droplet (JAMstack)

For now, I am hosting the site on the smallest, and cheapest, Digital Ocean droplet.

First, you will want to create a Digital Ocean account (disclosure: referral link).

\"\"

Then, select Create > Droplets.

\"\"

We will be using a template already provided by Digital Ocean, so click on Marketplace then See all Marketplace Apps to search all apps.

\"\"

Search and select Ghost.

\"\"

Click on Create Ghost Droplet.

\"\"

Choose the configuration you want. Since we will be using a static site generator to generate and host the site elsewhere, the cheapest plan should work.

This is the beauty of this setup! The CMS, and thus the droplet, is only access during rebuild while another hosting server or a CDN take care of actual user load. Therefore, the CMS server can be really small!

\"\"

Pick your datacenter location. Again, since our web hosting will take care of the actual task of serving the site, this doesn't matter much. I live in Thailand so I picked Singapore. (Though, I should have picked one closer to where my CI/CD build pipeline will take place...).

\"\"

Pick your authentication method. I recommend using SSH keys if possible. If you have never add an SSH key to your Digital Ocean account, click on New SSH Key and follow the instruction to add one.

\"\"

Finally, click Create Droplet and wait a bit while Digital Ocean is setting up your droplet for the first time.

\"\"

Once your droplet is ready, you will get a Public IP Address that you can use to SSH into the droplet.

\"\"

Configuring Ghost for the First Time

You will need to SSH into your droplet once to finish installation.

On Windows, you can use PuTTY to establish an ssh connection.

On a UNIX system (macOS, Linux), ssh should come standard with your shell.

SSH using password

If you selected One-time password as your authentication method previously, you can use:

ssh root@123.123.123.123

Where 123.123.123.123 is replaced with your Public IP Address.

If prompt to trust the certificate, type yes and hit enter.

It will then ask for password sent to your email. Enter that in.

SSH using SSH Key

If you selected SSH Keys as your authentication method, use the following command instead:

ssh -i /path/to/my/key root@123.123.123.123

Where /path/to/my/key is the path to your private key associated with the public key you configured for this droplet.

Auto Installation

Once connected, the shell should automatically finish the installation for you.

You will be asked to supply a domain name. Do so if you already have one, otherwise, enter http://<YOUR DROPLET PUBLIC IP>.

Once that is complete, visit http://<YOUR DROPLET PUBLIC IP>/ghost, or https://<YOUR DOMAIN NAME>/ghost if you have a domain, to set up Admin for Ghost for the first time.

\"\"
\"\"
\"\"
\"\"

Updating Ghost's base URL after the fact...

For those who are impatience (like me) and could not wait until you get your domain name set up and A name to propagete, you can update Ghost's URL after the first installation by following this guide.

Note that, the default installation for Ghost in Digital Ocean's droplet is at /var/www/ghost. You will also need to switch to ghost-mgr user using sudo -i -u ghost-mgr.

Set up Gatsby

To be continue in Part 2...

"},"url":"https://ghost.woodies11.dev/how-to-setup-ghost-netlify-part-1/","canonical_url":null,"uuid":"67402e1f-bdc1-4c9b-abd5-0f32b1d51383","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5e64b7d74e433422bb91b12a","reading_time":4}},{"node":{"id":"Ghost__Post__5e64863792369c3aae7627b8","title":"First Commit!","slug":"my-first-blog-post","featured":false,"feature_image":"https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ","excerpt":"New blog, resurrected!\n\nAfter loooooooong procrastination, I finally got the time to resurrect my Ghost blog.","custom_excerpt":"New blog, resurrected!\n\nAfter loooooooong procrastination, I finally got the time to resurrect my Ghost blog.","visibility":"public","created_at_pretty":"08 March, 2020","published_at_pretty":"08 March, 2020","updated_at_pretty":"10 March, 2020","created_at":"2020-03-08T12:44:23.000+07:00","published_at":"2020-03-08T12:51:37.000+07:00","updated_at":"2020-03-10T23:31:00.000+07:00","meta_title":null,"meta_description":"After loooooooong procrastination, I finally got the time to resurrect my Ghost blog.","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Romson Preechawit","slug":"romson-p","bio":"Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more.\nEnglish is not my first language so please help correct my grammar! :)","profile_image":"https://ghost.woodies11.dev/content/images/2020/03/IMG_2395-small.JPG","twitter":null,"facebook":null,"website":null},"primary_tag":{"name":"dev","slug":"dev","description":"Programming, coding, and development related topics.","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"dev","slug":"dev","description":"Programming, coding, and development related topics.","feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"\n\nAfter loooooooong procrastination, I finally got the time to resurrect my Ghost\nblog. A couple years ago, I rent a shared Web Hosting server to host my\nportfolio while looking for a job (actually, the real intent was to host a\nwebsite just for fun...).\n\nI also got a free domain name from NameCheap [http://namecheap.com/] as a\nstudent. That free domain came with free a year of free Ghost\n[https://ghost.org] instance! That's the first time I got to know of Ghost\n[https://ghost.org], and I instantly fall in love! Having used Wordpress before,\nGhost is just elegant. It reminded me a lot of journaling in Day One\n[https://dayoneapp.com] (which I still try to do everyday).\n\nResurrected - JAMstack\nI didn't really know what I was doing back then (and still don't know much now\nlol).\n\nGhost was already all setup. So, I was only using what's there. Otherwise, I my\nperfectionist would kick in and I would try to find the best way to host a blog \nand never actually get started.\n\nAs it turned out though, I hate the idea of shared web hosting. I feel like\nthose shared plan really restricted what I can do. Not being able to take\ncontrol of my backend feel bad!\n\nAnyway, so I ended up trying something different this time.\n\nUpon doing a bit of research, I stumbled upon the JAMstack\n[https://jamstack.org] (JavaScript, API, Markup). Basically, it leverage CI/CD\nprocess to continuously build a static-site with data source from a headless CMS\n, and serve them, usually through CDN.\n\nThe beauty of this setup is that you get the best of both world!\n\nStatic-sites\nStatic-sites are faster, more scalable, and more secure than most dynamic\nwebsites. Blogging is one of the best use case for static-sites. After all, you\nwouldn't normally serve a version of a blog page to one user, then another\nslightly customized version to another. \n\nSince all user will eventuall get the same version of the page, why not just\nrender that page and store it somewhere instead of pulling from database and\nrerender it every time?\n\nNevertheless, static-sites used to be hard to manage and maintain. Static-site\ngenerators like Jekyll, and, in this case, Gatsby, helped leviate a lot of those\nburden of the old-days. But they still require quite a bit of coding knowledge\nto use.\n\nCMS\nA CMS provide ways to create, update, and maintain your content without needing\nto touch any of the actual code. Wordpress has been the go-to CMS for years.\nGhost is a more recent althernative with heavier focus on just being a blogging\nplatform.\n\nThe API!\nWhile Ghost itself provide its own, pretty robust, frontend, its Ghost API allow\nfor a much greather possibilities. One could, as we have done here, replace the\ndefault frontend altogether in favor of another prefered Web Framework of\nchoice.\n\nWith the JAMstack, one would publish new content to the CMS as you would\nnormally do. A webhook would then trigger a rebuild process. The rebuild process\nusually involve the framework of choice refetching data from the CMS, build all\nthose into static-source, the publish the updated static-site to your web\nhosting target.\n\nThis allow you to have a fully automatic update and deployment of your static\nsites!\n\nHow to set up your own!\nSince the tutorial become so long, I have separated it out into another post\n[https://ghost.woodies11.dev/how-to-setup-ghost-netlify].","html":"

After loooooooong procrastination, I finally got the time to resurrect my Ghost blog. A couple years ago, I rent a shared Web Hosting server to host my portfolio while looking for a job (actually, the real intent was to host a website just for fun...).

I also got a free domain name from NameCheap as a student. That free domain came with free a year of free Ghost instance! That's the first time I got to know of Ghost, and I instantly fall in love! Having used Wordpress before, Ghost is just elegant. It reminded me a lot of journaling in Day One (which I still try to do everyday).

Resurrected - JAMstack

I didn't really know what I was doing back then (and still don't know much now lol).

Ghost was already all setup. So, I was only using what's there. Otherwise, I my perfectionist would kick in and I would try to find the best way to host a blog and never actually get started.

As it turned out though, I hate the idea of shared web hosting. I feel like those shared plan really restricted what I can do. Not being able to take control of my backend feel bad!

Anyway, so I ended up trying something different this time.

Upon doing a bit of research, I stumbled upon the JAMstack (JavaScript, API, Markup). Basically, it leverage CI/CD process to continuously build a static-site with data source from a headless CMS, and serve them, usually through CDN.

The beauty of this setup is that you get the best of both world!

Static-sites

Static-sites are faster, more scalable, and more secure than most dynamic websites. Blogging is one of the best use case for static-sites. After all, you wouldn't normally serve a version of a blog page to one user, then another slightly customized version to another.

Since all user will eventuall get the same version of the page, why not just render that page and store it somewhere instead of pulling from database and rerender it every time?

Nevertheless, static-sites used to be hard to manage and maintain. Static-site generators like Jekyll, and, in this case, Gatsby, helped leviate a lot of those burden of the old-days. But they still require quite a bit of coding knowledge to use.

CMS

A CMS provide ways to create, update, and maintain your content without needing to touch any of the actual code. Wordpress has been the go-to CMS for years. Ghost is a more recent althernative with heavier focus on just being a blogging platform.

The API!

While Ghost itself provide its own, pretty robust, frontend, its Ghost API allow for a much greather possibilities. One could, as we have done here, replace the default frontend altogether in favor of another prefered Web Framework of choice.

With the JAMstack, one would publish new content to the CMS as you would normally do. A webhook would then trigger a rebuild process. The rebuild process usually involve the framework of choice refetching data from the CMS, build all those into static-source, the publish the updated static-site to your web hosting target.

This allow you to have a fully automatic update and deployment of your static sites!

How to set up your own!

Since the tutorial become so long, I have separated it out into another post.

","childHtmlRehype":{"html":"

\"\"

After loooooooong procrastination, I finally got the time to resurrect my Ghost blog. A couple years ago, I rent a shared Web Hosting server to host my portfolio while looking for a job (actually, the real intent was to host a website just for fun...).

I also got a free domain name from NameCheap as a student. That free domain came with free a year of free Ghost instance! That's the first time I got to know of Ghost, and I instantly fall in love! Having used Wordpress before, Ghost is just elegant. It reminded me a lot of journaling in Day One (which I still try to do everyday).

Resurrected - JAMstack

I didn't really know what I was doing back then (and still don't know much now lol).

Ghost was already all setup. So, I was only using what's there. Otherwise, I my perfectionist would kick in and I would try to find the best way to host a blog and never actually get started.

As it turned out though, I hate the idea of shared web hosting. I feel like those shared plan really restricted what I can do. Not being able to take control of my backend feel bad!

Anyway, so I ended up trying something different this time.

Upon doing a bit of research, I stumbled upon the JAMstack (JavaScript, API, Markup). Basically, it leverage CI/CD process to continuously build a static-site with data source from a headless CMS, and serve them, usually through CDN.

The beauty of this setup is that you get the best of both world!

Static-sites

Static-sites are faster, more scalable, and more secure than most dynamic websites. Blogging is one of the best use case for static-sites. After all, you wouldn't normally serve a version of a blog page to one user, then another slightly customized version to another.

Since all user will eventuall get the same version of the page, why not just render that page and store it somewhere instead of pulling from database and rerender it every time?

Nevertheless, static-sites used to be hard to manage and maintain. Static-site generators like Jekyll, and, in this case, Gatsby, helped leviate a lot of those burden of the old-days. But they still require quite a bit of coding knowledge to use.

CMS

A CMS provide ways to create, update, and maintain your content without needing to touch any of the actual code. Wordpress has been the go-to CMS for years. Ghost is a more recent althernative with heavier focus on just being a blogging platform.

The API!

While Ghost itself provide its own, pretty robust, frontend, its Ghost API allow for a much greather possibilities. One could, as we have done here, replace the default frontend altogether in favor of another prefered Web Framework of choice.

With the JAMstack, one would publish new content to the CMS as you would normally do. A webhook would then trigger a rebuild process. The rebuild process usually involve the framework of choice refetching data from the CMS, build all those into static-source, the publish the updated static-site to your web hosting target.

This allow you to have a fully automatic update and deployment of your static sites!

How to set up your own!

Since the tutorial become so long, I have separated it out into another post.

"},"url":"https://ghost.woodies11.dev/my-first-blog-post/","canonical_url":null,"uuid":"0af45778-676d-44a9-9355-6d230da7bb6a","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5e64863792369c3aae7627b8","reading_time":2}}]}},"pageContext":{"pageNumber":1,"humanPageNumber":2,"skip":18,"limit":18,"numberOfPages":2,"previousPagePath":"/","nextPagePath":""}}, "staticQueryHashes": ["2358152166","2561578252","2731221146","4145280475","557932121"]}