QuarantineCoding #1 - Launching new static site on old WP domain

[BCN]

I have some more time on my hands now since I can't leave the house for the next couple of weeks, and every day feels like the movie "Groundhog Day" ... so I want to code some fun stuff and maybe learn a thing or two.

I have some old WP sites which are a pain in the ass to maintain. Nothing bad about WP, but I just don't like it that much. I tend to forget about them, and then have to go in and update them. I like to work with code and not the WP ecosystem, all though Nuxt/Vue and other frameworks are also abstracted from the real code, at least they give you more options, and the code is structured in a better more modern way.

I have an aged domain that used to make a few thousand euros per month, then the market got more regulated ... and my site wasn't compliant (had to do a lot of stuff with fonts, disclaimers, CTAs, etc, so I removed the offers and have just let it age...)

Anyways, I will relaunch it now, as there are still good offers for the niche.

I don't want to spend much more than 10 hrs on the site, so here's the plan (I already have a lot of the content, and have some APIs to pull in content from). I contacted the government and signed a contract for using their data, I just had to say that I would comply with their requirements.

Tech:

1. NuxtJS - It's just Vue JS which is just JS, but it has some nice built-in stuff like code splitting, routing etc. I will make it in universal mode and deploy it as a static site (not server-side rendered). So each page will have a html file, and once you enter the page, the JS takes over and does the fancy JS animations between pages etc, and controls the routing in JS.
2. Netlify (free hosting for static sites), I'll pay for it eventually to run some functions and stuff in there.
3. Cosmic.JS for API/Data (I will anyways generate a static site, but I will use the API endpoints to generate pages every time I make new content).
4. Domain (already have it, decent branded .io, from Internet.BS)
5. Need to pull in data from API to Cosmic.JS, not sure how to do it, but will figure it out.
6. Tailwind CSS for the CSS, because it's easy - and it becomes very lightweight when running purgecss.

Also part of the goal is that I know normal backend dev OK, but want to learn some more frontend stuff.

I spent around 1 hr so far.

TO DO/Done

• Set up GitHub + CI flow with Netlify when I push to git. Every time I push to master, Netlify will rebuild the site.
• Set up base Nuxt project and some simple views (just ripped some from another project)
• Set up some stuff like IMG optimization as part of the CI workflow + purgecss
• Set up Cosmic.js
• Figure out the data store (Vuex)
• Set up GTM with Nuxt/Vue - there is probably an npm package for this
• Make simple design in Tailwind CSS
• Define content types and map them out in Cosmic JS
  • We need
    • pages (might just do these in markdown/js, since they don't follow one exact format (think: top of silo pages)
    • blog posts
    • product type a
    • product type b
    • product type c
    • offers (I think I will use Genius link to keep track of affiliate links)
    • Some taxonomies like product types, brands, blog post categories ++ I will see once I start using Cosmic JS, as I've never used it for anything useful.
• Scrape the old WP site and import to Cosmic JS/Markdown for content that won't change (ToS, About and all that), maybe I'll just copy/paste the good stuff and bin the rest.
• Pull data from API to Cosmic JS, I need to figure out a "plugin" or something to
  • Replace a tags with nuxt-link tags for links that come from the api
  • add tokens to content and then replace them with vue components after they're pulled in (for in content CTA)
• Get it approved from the network again
• Optimize speed (them high 90s), stuff like next-gen image formats, lazy loading ++ Nuxt does some out of the box.
• Map out 30 more nice KW to get content for
• Offload all static resources to Cloudfront
• I will try to keep the URL structure, if not I will need to make a bunch of 301s.

Once the site is done, I'll do another round of content and then buy ~10 links from good sources and see if we can resurrect this. I don't count those hours in the 10-hour budget, because someone else will do the work and I just pay them.

I will do some more work tomorrow, and post some more info then. I named this #1, because I'm stuck for weeks, so I might code some more fun stuff! ✌

 

[FIREman]

One thing that you should look into, is to have a workflow for vendorizing your dependencies and build artifacts, either by checking them into version control or backups somewhere. That way, you can build and test your site in a completely offline environment and know that it will always work.

I don't trust the js ecosystem or npm packages enough. Feels like a house of cards with security vulnerabilities everywhere.

 

[BCN]

One thing that you should look into, is to have a workflow for vendorizing your dependencies and build artifacts, either by checking them into version control or backups somewhere. That way, you can build and test your site in a completely offline environment and know that it will always work.

I don't trust the js ecosystem or npm packages enough. Feels like a house of cards with security vulnerabilities everywhere.

Ah I see, like hosting your own packages in a central place?

I did all the relations + models in Cosmic today, and wrote some API calls to pull them into Vuex. Also got the content I would like to keep offline.

Made models for

- Articles
---- _id
---- title
---- body
---- tags FK
---- date_posted
---- date_updated
---- featured_img
---- author FK

- Tags
---- _id
---- tag_name

- Product 1
---- _id
---- name
---- tag FK
---- aff_link
---- body
---- rating
---- featured bool
---- benefits array[string,...)
---- drawbacks array[string,...)
---- disclaimer

- product 1 meta
--- All data I can get from api ...
--- FK product

So I got the data coming in now, just need to render it properly on frontend. Will need to figure out a generator for getting all endpoints across models for generating the static routes.

Spent around 1 hr.