I’m working on improving our team website and looking for examples of what other teams have done.
For our website, we use Hugo so if there are any examples of what teams have done using this framework I would love to see them for inspiration.
I’m also looking to add couple features to the website: social media feed, contact form, etc. So if you have any tips there please let me know!
We tried this out back in the 2018 season. Here’s our repo and generated website.
Unfortunately, this way of having the site didn’t really pan out; While we did try to make it user-friendly to upload and change, this involved a custom IDE to a degree. At the time there wasn’t great IDE and tooling support, and the media-focused teams didn’t want to deal with running a local site and build processes to check their changes. In particular, the amount of code needed to change the visuals was a problem for them. As a result, it didn’t survive the 2019 season, and the site was rebuilt using a different content manager entirely.
As far as feedback goes, this is the big one: Make sure it’s easy to use, and has proper buy in before committing to the big picture and doing the more difficult design efforts.
For a Contact form, you’ll need to be mindful of your hosting solution. Because Hugo is a static site tool, some hosts (such as Github.io) don’t provide a way to run server-side code, locking you out of some options. Google Forms is probably the easiest solution in that case, but with most hosts you can do it easily enough using a simple JS form and a backend script to send an email out or record on a text document.
I’m the author of a free open source contact form that I have been using for 22 years now. It requires a web host that can run perl. (Most shared hosting can do so.)
You integrate it with the look and feel of your website by having your CMS produce a HTML template for it to fill in some variables. If you can have Hugo generate an HTML file with four $ variables similar to this, then you should be able to make it work pretty easily.
<html>
<head>
<title>$title</title>
$css
$javascript
</head>
<body>
<h1>$title</h1>
$content
</body>
</html>
We use Hugo for our team docs site: Home :: Bionics Docs
For context I built the site @brandonmcd is in the middle of working through. It’s a very basic Hugo site setup under the Ananke theme which was picked out by our business/marketing team 2 years ago. They have all since moved on and the current subteam is not technical. Just setting up Hugo on Path, getting VsCode setup and explaining GitHub to them was “too much” and I can see what they mean.
Our backend hosting is through GoDaddy and Cpanel. I’m not super familiar with all of its features, but I don’t believe I can do backend scripting. Currently our contact form is as you guessed an embedded Google form or it’s a JotForm embed (I have an account I use for my side business I pay for and I make forms for the team on occasion with it).
Both were easy solutions and the upside of Google forms is they can be linked to the team email and Google drive where we store data already. I’m sure jotform can do the same but I’m planning to cancel that account anyways.
Other options available are firebase hosting with backend availability or setting it up on a heroku server that can support NodeJS backend (what I’m very comfortable with).
Finally because I use Hugo for FRCZero.org I have been working on a wysiwyg editor for Hugo websites but it’s been slow. Ultimately I would like that system to be signed into via your GitHub account, pull down the latest version and automatically make a new branch when someone is making a new page, editing, etc. the front end would look like a markdown text editor for their current page with a live preview window on the side. There are plenty of Rich Text editors that can create markdown as an output. The editor here on CD might be built on the same plugin I was looking at for this. I really like it and it does generate markdown as expected.
I setup what’s basically a notion site with some css injection for 9442. Notion is possibly the cheapest wysiwyg editor if used in this way compared to squarespace or wix or other paid options. I originally started a Hugo site but I experienced the same thing having trouble documenting how to edit it to non-tech as @kingc95
Wordpress site. Pretty much any webhost will have it. The CMS is fairly easy to learn. Lots of plugins that can do pretty much most of what you want/need. Can be easily managed by non-tech folks - purely content play really. Lots of theme to choose from or make your own.
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.