Generate static websites dynamically using Hugo - hugo

I'm building a static website hosting and would like to generate default web pages for my users and would like to use Hugo for this. Question is, what would be the best way to dynamically generate web pages for multiple users? This is my thought so far:
User fills up form for their website content e.g., photos, title, product descriptions, etc.
Pass to backend (I'm using Perl's Mojolicious) and create markdown files based on the provided information and save them in a designated folder created for this user
Run Hugo to build using those md files and move the public folder to user's root directory
This doesn't look right to me as there will be contention of multiple users to run Hugo and I'm thinking that it is much easier if I can just create the html files directly from backend instead of creating md files and then run Hugo to create the html files. Is there any better and smarter way?

If I am not mistaken, it seems you want to make a WordPress portal alike or something similar, going from Markdown plus theme down to HTMl/CSS/JavaScript content. The end-users edit the content in Markdown, choose the theme and the rest will be taken care of.
IMHO, there might be two ways:
(1) Using Hugo at the back-end and taking care of the destination folders and generated artifacts as well as mapping generated links to the front-end corresponding to your particular end-user's hosting. You can create a Hugo wrapper in which the input will be fed to Hugo and the generated pages will be in the public folder. In this way, you have to rely on an external tool (read Hugo) and wish for a long-term support version like many other systems (e.g. Ubuntu, Java, Windows).
(2) Creating a similar generator like Hugo or another (c.f. StaticGen for more generators on different languages). You may need the core of a Markdown based static site generator, for instance, a Markdown parser, link translators and generators, etc. With extra effort, you might have more control of every smaller component/library that you use, can configure the generated artifacts, their destinations, etc.
A side note: Markdown is a not-so-bad choice for content. Even WordPress have offered support for Markdown. Nonetheless, Markdown itself is not standardized but rather de facto. There are so many flavours. You might want to look up to or stick with a good one, for example, CommonMark.

Related

How can I create an add folder functionality to my React CMS application?

Click here to see a picture of what I mean
I haven't tried anything yet because I'm not sure how to even approach this problem. I'm not even sure what to Google. I do, however, have a pretty good handle on React. Thanks!
Update: The folders will not be storing files, just hyperlinks.
You need to model the problem space first. i.e. models for folders, and files. Each having properties (name, etc.) and associations (folders can have many files and subfolders).
To store the physical files you can use a third-party service like Amazon S3.
This would get you started at least.

Standard method to find and edit front-end files in CakePHP

I have recently been asked to take over the administration of a website that is built on CakePHP 3.x.
I have never worked with CakePHP before. Everything I have read talks about using a command line interface, but I haven't done this since I was in Uni.
I discovered a Dashboard on the website where I can enter or edit the products, but I was wondering about the pages on the site.
I had to change some phone numbers in the footer of each page and it was only hunting through the files that I found src/Template/Element/footer.ctp and edited this.
Is there some way of editing the pages without finding the individual files?
No. What you're referring to (the command-line stuff) is for when you're baking files, running shell tasks, doing database migrations, installing things via composer, or using the built-in local server...etc. There are other uses too, but editing front-end files is not usually one of them.
Though there are methods for altering local files via command line, for the things you're talking about, like editing a footer, or other pages (.ctp "Template files" in Cake 3), it's standard practice to just do that manually.
See the standard path for template files in these examples:
src/Template/Users/profile.ctp
src/Template/Pages/contact.ctp
src/Template/Layout/default.ctp
A "layout" file usually fetches the header, content, and footer.
As you've found, there are also Elements, which are smaller chunks of code that are reusable across one or more Template files.

How save text, svg, html, css all together efficiently

In an application, I am using Fabric.js, which lets users write text, draw SVG's, insert images etc.
I want to know, what is the best way to store this data.
Requirements are:
Ability to query the data(text), which tells me that i should store it in DB (MySQL as of now)
I have images, and I am targeting IPad as well, so the images are important, as to how they are stored.
SVG's and HTML/CSS to be saved as well.
I also want to do versioning of the content, as Quora does it, so that a user can see the changes from the past version to the current version. This also includes the versioning of images and SVG's.
I am wondering how Google Docs does it, because they also store our documents, drawings etc.
What is the best way of doing this?
i dont known if it helps but, Opera browser offer an option to save the webpages to an unique file { mht extension }, this stores all the files { css, images, scripts, etc } in base64 encoded text for a later use { when the document is opened }... maybe this can be a way to store data :P
I manage a webapp where users generate reports, and found it more efficient to store images and binary files in the filesystem, and link to them from the database. Elements that are in xml or text are kept in the database for easier searching - in your case this would include css/html and svg (which is xml). Use the database for managing revisions.
Might also check out this thread on storing images in a database.
It looks like Frabic.js is using the node.js javascript webserver on the backend - haven't used this before, but you might investigate which databases are easiest to use with node.js:
node.js database
nodejs and database communication - how?
nodejs where to start?
If you want to query the text efficiently, then perhaps putting all bits of information into the DB separately is the most efficient. Maybe you with to play with OOXML or ODF, that may serve as container for all information you require, and then XML-storage (e.g. eXist) to store it and query (e.g. the text). As these standards are XML-based, you can transform them into HTML (e.g. here or here) but writing an online editor for this is something that monster like Google can do.
You can take a look at NoSQL databases like MongoDB or
CouchDB
See also Storing images in NoSQL stores

dynamic content on pages

I'm trying to migrate all "content" pages on a website to DNN5 Pro.
So I just created all the pages in DNN, added HTML module to the ContentPane and copied and pasted the HTML content from old pages.
The problem is that most of the pages have bits of classic asp code which do some minor server-side tasks - for example, populate tables with prices fetched from DB, pre-select user's country based on his IP address, do some basic dates calculations, etc.
Obviously, this code won't work in DNN.
If I had to migrate to PHP, I'd just rewrite these bits of code from classic ASP to PHP, then assign values from PHP to smarty and then would use them in templates.
But as DNN has a completely different architecture, I can't see how similar approach can be used.
Token replacement feature in HTML module looks like what I need, but it allows to "map" only tokens provided by DNN.
So, maybe anyone had similar issue with DNN and/or knows how this should be done.
It seems like you are attempting to subvert the entire point of DotNetNuke. While certainly there are a variety of hacky ways you could try to make this work just like the php site, it's a terrible idea to do so.
Instead, you need to evaluate each of the dynamic sections of the php site and find or create a DotNetNuke module that will replicate that functionality.
To make the initial conversion quicker, you can build modules you create using simple ASP style inline scripting but you should definitely use existing modules for things like displaying data in a grid.
You could write code directly in your skin file. Do some logic like:
<%If PortalSettings.ActiveTab.TabID = 33 Then
//code here of what you want
End If%>
Where 33 is the page id for the page you want to run custom code on. There are other ways to do this like creating skin objects, or creating custom modules, but this is probably the easiest thing to do. Just write code directly in you skin. Or make a copy of your skin for each page you need to do custom code for... again, more elegant ways but this will get'er done.

What are your recommendations for reducing the number of resources (JavaScript and CSS) that DotNetNuke loads?

The home page for DotNetNuke 5.2 is around 252.6KB. It uses 15 JavaScripts and 8 CSS files. The number of resources DotNetNuke uses seems excessive to me. I am looking for best practices creating DotNetNuke skins that limit the JavaScript and CSS resources.
You can use the Unload CSS Skin Object to remove links to some of the CSS files loaded by the framework (like Default.css, portal.css & any module-specific CSS files). You can then move all of those styles into the skin (or portal stylesheet, whichever is your preference), so that there's only one stylesheet that gets loaded.
I don't know of any solutions for combining JavaScript resources or reducing the number of scripts that DNN requires.
From 6.1 onward, the Client Resource Management component is the solution for this. It automatically combines all your files, cleaning them up, removing comments, and minifying if desired.
http://www.dotnetnuke.com/Resources/Wiki/Page/Client-Resource-Management-API.aspx
It takes a little getting used to, but the control is quite nice. You can decide which order they'll go in, you can group the files in bunches if you don't want one big single file - maybe you want certain bunches of scripts together but not all.
One thing to remember is that when you're doing development (as noted by the comment below, which I've since edited this post), you should always use debug=true in the web.config, otherwise if you are using Resource Mgmt and change your source files, you'll constantly need to regenerate the combined files by going into Site Settings, Client Resource Management, and increment the version. It's kind of a protection to keep anything from altering your clients' browser caches without intent (that's the message box that pops up to let you know when you do it). I'm sure if you have a zillion users this might make a difference.
Part of that is just the dynamic nature of DNN - there are some good resources that R2i has published about combining javascript and CSS
One concrete suggestion is to combine all your skin and contianer css in one file and if you have full control of the site to combine the css from the modules you use into that same file.
I know with the addition of the Telerik controls there is some abilities to combine resource files
Another thing that helps is to combine graphics into a single file and use CSS (the sprite technique) to cut down number of files loaded and calls to the sever
Like it was stated above, it's the nature of the beast. Each module will have at least 1 css file included. You can check out PageBlaster from snapsis.com, I believe it will do what you are looking for.

Resources