diff --git a/posts/from-github-pages-to-aws.html b/posts/from-github-pages-to-aws.html index 5d31f53..9813166 100644 --- a/posts/from-github-pages-to-aws.html +++ b/posts/from-github-pages-to-aws.html @@ -24,40 +24,128 @@
-
-
-

From GitHub Pages to AWS

- -
-
+
+

From GitHub Pages to AWS

+ +
-

a subheading you will fix

+

pages begone

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis - quam, varius eu ullamcorper ac, tempus eget risus. Vestibulum ante - ipsum primis in faucibus orci luctus et ultrices posuere cubilia - Curae; Nunc convallis sem id sapien dictum condimentum. Quisque - placerat diam vel dolor facilisis, vel gravida lorem lacinia. Sed - dapibus eleifend tortor, a gravida orci convallis non. Nam auctor - justo id magna accumsan, sit amet accumsan lorem dapibus. Nullam - eleifend enim nec augue fermentum, vel feugiat dolor elementum. - Integer et sapien nec ipsum aliquet sodales. Nam eleifend id nisi - vel consectetur. Ut et magna sit amet elit tempus elementum. - Curabitur elementum quam at erat iaculis, ut ultrices leo - vestibulum. Nam quis fermentum mi, at bibendum orci. + Though GitHub Pages may work for hosting your small, internal, + static site, I don't think Pages is the right choice for + anyone: +

+
    + +
  1. Bandwidth caps: scale your software by default
  2. +
  3. + Limited SEO control: not a downside if you don't want want + traffic... +
  4. +
  5. Static & client-side only: keep your options open
  6. +
+

why aws?

+

+ I used pages before because I had little knowledge of cloud + computing.

- Vestibulum ac diam sit amet quam vehicula elementum. Curabitur - laoreet arcu eu mi luctus, in consectetur nisi fermentum. Praesent - nec nisl et leo sollicitudin tempus. Morbi non tincidunt est. Duis - non felis pharetra, malesuada nulla a, iaculis felis. Proin sit amet - dui dignissim, pellentesque felis a, eleifend velit. Morbi ac tortor - nec arcu euismod lacinia et ac libero. Sed non risus aliquet, - venenatis nulla vel, commodo augue. Mauris in neque vel nulla - sollicitudin egestas. Cras fringilla urna sed mi scelerisque, at - laoreet metus dapibus. + This is not a justification—if you are a software developer, + learn it. +

+

+ Prior to hosting this site, I developed and hosted an internal + application with Google Cloud while working at + nth Venture. Getting a single + Compute Engine up and running made me step away from cloud for the + entire next year. +

+

AWS is:

+
    +
  1. + Industry standard: not an actual reason but it convinced me + nonetheless +
  2. +
  3. + Secure: soon to be used by VISA, which holds security to a nearly + stupid extent (seriously, I can't even clone a repository) +
  4. +
  5. + Well-documented: everything in the documentation worked + first try. This is extremely rare in software, so + compliments to Chef Bezos. +
  6. +
+

the setup

+

+ This website is pure HTML, CSS, and JavaScript. While I will + certainly need sever-side capabilities eventually, I am seeing how + far the purist route can take me. +

+

AWS-wise, I use:

+
    +
  • S3, to host the content (static for now)
  • +
  • CloudFront, to serve and cache said content
  • +
  • Route53, to manage routing
  • +
  • + GoDaddy, to reserve + barrettruth.com +
  • +
+

A user request can be modelled as follows:

+
    +
  1. + A user accesses the website by typing barrettruth.com in their + browser. +
  2. +
  3. + GoDaddy' s DNS servers are queried, which translating the + domain name to my Route53's IP address. +
  4. +
  5. + Route53 then routes to the request to my CloudFront distribution + associated with my S3 bucket. +
  6. +
  7. + CloudFront checks its edge caches for the requested content. If + the content is stale or not cached, CloudFront fetches the content + from S3. Otherwise, it uses the cached content from an edge + server. +
  8. +
  9. CloudFront returns the content to the user's browser.
  10. +
+
+ system design of my portfolio
+          website +
+

difficulties

+

+ The hardest part of hosting this website was interfacing with + GoDaddy. +

+

+ For example, configuring SSL certificates with GoDaddy is needlessly + challenging. Follow + AWS's guide + if you really want to. Otherwise, + configure your GoDaddy nameservers + and point them to your own DNS service (like Route53) instead.

diff --git a/public/website-design.webp b/public/website-design.webp new file mode 100644 index 0000000..374fdcb Binary files /dev/null and b/public/website-design.webp differ diff --git a/styles/common.css b/styles/common.css index b44788e..90631f3 100644 --- a/styles/common.css +++ b/styles/common.css @@ -35,6 +35,11 @@ body { height: 100%; } +header, +footer { + padding: 20px; +} + .graph { background-image: linear-gradient( to right, diff --git a/styles/index.css b/styles/index.css index c1140f6..ad0712d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -8,7 +8,6 @@ header, footer { font-size: 1.5em; display: flex; - padding: 20px; align-items: center; } diff --git a/styles/post.css b/styles/post.css index cd8cb3b..e58c02d 100644 --- a/styles/post.css +++ b/styles/post.css @@ -1,7 +1,7 @@ html, body { font-family: "Signifier", serif; - overflow: hidden; + overflow: scroll; margin: 0; padding: 0; height: 100%; @@ -10,7 +10,6 @@ body { header { font-size: 1.5em; display: flex; - padding: 20px; align-items: center; justify-content: space-between; } @@ -28,10 +27,6 @@ header { max-width: 80%; } -.post-title { - font-weight: normal; -} - .post-meta { font-style: italic; /* space between date and title */ @@ -40,9 +35,8 @@ header { .post-title { font-weight: normal; -} - -.post-title { + font-size: 2.2em; + margin: 50px 0; width: 100%; position: relative; display: inline-block; @@ -71,6 +65,7 @@ header { article { font-size: 1.5em; line-height: 1.2em; + padding-bottom: 20px; } article h2 {