I decided to rebuild my portfolio site w/ Vue and looked at a lot of headless CMS options before stumbling upon Cockpit, and I couldn’t be happier with the choice (I sing its praises wherever and whenever I can ) I used my own site as a way to familiarize myself w/ Vue (CLI) along with the headless/API-driven paradigm, so it’s a very basic configuration: Projects are set up as a collection w/ fields and I’m using the wonderful Image Styles add-on to manage image sizing in different contexts. I also have a singleton set up for the text on the About page. (I created a contact form as well, but I’m still playing around with the implementation.)
I just thought I’d share the result and say thank you to the Cockpit dev team for a phenomenal CMS, as well as the community for their support along the way. Here’s the link: https://www.nickpishstudios.com/
Nice one!
Very clean DOM and refreshing page-switch-animation.
I’m surfing your website from Europe and it seems the images load a little slow, me being all the way under and over the big lake and stuff.
But that made me think about the way you currently load your images. You directly show them as a normal <img/> tag, therefore loading the 1400px wide images also for a mobile view.
Thanks so much for taking a look! And that’s very helpful feedback re the images- I definitely need to change those images over to a responsive format. I’ll likely use the <picture> element in conjunction with the Image Styles add-on to serve out different sizes and let the user agent decide the best one, especially for mobile users!
Thanks for sharing. I am a bit confused about how prerender.io works. Does the service create a static site or a secondary static representation of the website?
Prerender is a sort of pass-through service targeted at crawlers and bots. I created my site w/ Vue CLI, using all client-side JS, with no SSR (although, I may try rebuilding in Nuxt w/ SSR in a subsequent version of the site) - so, as is, SEO takes a hit as crawlers have a hard time rendering, along with bots for link sharing w/ Twitter, LinkedIn, etc. Prerender.io creates cached, static versions of all pages, and then serves the rendered HTML/CSS to those crawlers/bots. The configuration took a bit of time, but since I’m using Apache, I added some directives to my htaccess file to essentially differentiate the crawlers from actual visitors and serve out the static/cached pages accordingly. My site is very simple, so there are very few cached pages, but you can upload a sitemap to Prerender to have it easily crawl and cache all pages- overall, I’ve been very impressed! There are also tools to use in a local/dev environment to test and ensure it can successfully render pages.
) I used my own site as a way to familiarize myself w/ Vue (CLI) along with the headless/API-driven paradigm, so it’s a very basic configuration: Projects are set up as a collection w/ fields and I’m using the wonderful Image Styles add-on to manage image sizing in different contexts. I also have a singleton set up for the text on the About page. (I created a contact form as well, but I’m still playing around with the implementation.)