Nerderypublic.com is delivered with WordPress – no issues, but haven’t tried to do much with it.
Our church’s website is also delivered with WordPress. Arrgh. Not well built, quite the pain to work with. As the primary maintainer, wanting to get off of it. We have other reasons to want to get off of it, including that our hosting environment for the site + the church email has had issues. Ergo, this geek is looking for other solutions.
I’m leaning towards a GitHub page delivered solution, using a static site generator which looks at markdown files for entries. Experimenting with Nuxt.js at the moment, using GitHub Actions to push out the generated site, and hopefully integrating Netlify CMS to provide ease of use for contributors other than myself. We’ll see how the experiment turns out.
- Set up a virtual machine with a Linux environment to work in
- Installed npm
- Created a “church-site” using the command
npm init nuxt-app church-site, per the instructions on the Nuxt site
- Choices of note:
- Package manager: NPM instead of Yarn: again, familiarity, though suspect Yarn would’ve worked just as well
- UI framework: Bootstrap Vue: some familiarity with generic Bootstrap. No familiarity with the rest listed as options
- Nuxt.js modules: eh, took ’em all: Axios Promis based HTTP client, Progressive Web App, Content via Git-based headless CMS. Maybe we won’t use ’em. Right now, I’m not worried about optimizing.
- Linting tools: took ’em all .
- Testing framework: have some past experience with Jest, none with the others. (Hey, I haven’t done Web app development in a bit…)
- Rendering mode: Universal
- Deployment target: Static (Static / Jamstack hosting)
- Development tools: took ’em all
- Continuous integration: GitHub Actions
- Version control system: Git
- a ‘Welcome to your Nuxt Application’ site available on localhost:3000 when I run
npm run dev
npm run generatedoesn’t complain, seems to have generated some content under perhaps static
- Was able then to update some items in the components/Tutorial.vue component, as well as the site name in nuxt.config.js and see them reflected in the running website
- connect it in with Git, Github Actions, and github pages
- Pull in a collection of markdown items (ala sermon descriptions, correlated with YouTube links)
- Netlify CMS to edit a markdown items, see flow through
Got it pushed to Git, working with GitHub Actions, and auto-building to a GitHub page. It’s still the same starter system, but the auto-build has somehow opened 6 pull requests on my project to bump up various dependencies. Each of those pull requests triggered a successful auto-build.
Things I wrestled with:
- commit-lint: sure, I’ve noticed that lots of git commits in various public repos follow a particular structure of late – something like “feature(build): some text here”. That said, was surprised when my commit wouldn’t push unless it followed that structure. I’m sure I could turn off that particular pre-commit hook, but for the moment I’m leaving it there and trying the new (to me) style.
- prettifier: I left on all the linters for the source code originally. I was regretting that earlier when my code wouldn’t pass inspection and I couldn’t find info as to why. I finally turned off linting in the build steps. For my purposes, it may not be all that necessary: I’m not really trying to sustain a community of developers with a consistent looking code-base. For learning purposes, I’ll futz with it again in the future, but not going to let it block progress.
- somehow my original git clone didn’t set up a remote? I had to manually add one, which confoozled me for a minute. Resolved, but… Note that this is the first time I’d set up an ssh key against Github, apparently… I thought I had before, and I’ve definitely done it regularly for Gitlab, but maybe that was the difference in procedure; the clone via ssh. Dunno. Got past it, regardless.