I have a large website with several consistent text, like the nav, contact, footer, etc. I was wondering how I could keep all of these consistent on my static website (hosted on github pages) by loading the code from another file or any other method, since currently I have to manually update everything and it takes a while.
Github pages uses Jekyll as the underlying static site generator. You can break down your site into multiple smaller html pages that can be included into a main layout.
https://jekyllrb.com/docs/includes/
The include tag allows you to include the content from another file
stored in the _includes folder:
{% include footer.html %}
Jekyll will look for the referenced file (in this case, footer.html)
in the _includes directory at the root of your source directory and
insert its contents.
Read the documentation on this and you can easily find repeated text/html and replace them with includes.
If you're not already, this site has instructions so you can run jekyll locally to verify changes before pushing the changes to Github.
Related
We are uploading a pre built static site to gh pages using the .nojekyll file in the root folder. However if we use pretty URLs without the .html extension then all of our links present the user with a file open/save as dialog because the browser thinks it's file octet stream.
As we are not using Jekyll do we need to have a _config.yml ? Either way with or without cant get pretty urls to work.
I'm trying to get VuePress to work well with GitHub Pages and a custom domain. I have the site working -- https://www.southertonrr.com (repo) -- as long as I manually add a CNAME file to my output folder ('./dest', or in my case, './docs', because that's where GitHub Pages looks for the site) every time after I issue a build command. Otherwise, I assume the build command deletes everything in my output folder and rebuilds the entire site.
Is there a way to get vuepress build to either leave that file alone, or copy a CNAME file from my ./src to my ./docs? Should I be looking at the configureWebpack config to use webpack to do it? (I'm new to webpack.)
Different product completely, but I noticed that Docusaurus for React has a CNAME config setting that does this for you, so I thought I'd check to see if the VuePress community had something similar.
See relative document
Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components - for example, favicons and PWA icons. In such cases, you can put them inside .vuepress/public and they will be copied to the root of the generated directory.
I am very new to web development and the following is my use-case :
I have a large number of Bokeh charts, each in a separate HTML file.
In simple terms, I would like to have a home page, where I can provide
links to each one of these charts. However, During runtime, I would
like to edit these separate HTML files, so as to provide a link to go
back to the home page or to other pages. I would not like to modify
the HTML files permanently, so I can make use of them outside of the
web page as well for simple visualization on my system.
What is the best way to do this ? Are there technologies outside Django, I should be looking at to do something like this ?
If most of the content is static, maybe have a look at Jekyll.
The include functionality would let you create one file with the 'link back to the homepage' or in fact further content which you want to avoid repeating (such as navbars, headers, footers).
Bootstrap 4 is your freind for making the site look shiney.
As you're building the site you can run the development server with jekyll serve which allows you to connect to a development server from your browser, and preview changes as you're making them. This would be accessible somewhere like http://localhost:4000/
When you're ready to publish, you can use the jekyll build command, which outputs all of the static HTML files to the _site directory. Notice that at this point, the step of 'putting the homepage link in every page' is handled automatically by Jekyll and you end up with a directory you can upload directly to any hosting platform. The original HTML files/Boken Charts can therefor remain in their original form for use elsewhere.
This method is probably much more effiient than using Django for your use-case, which seems to require serving lots of static content whch already exists. With Django in production you'd need an application server, as well as a webserver and possibly a database which means more things to go wrong.
For bonus points, once you've got the hosting setup, stick the whole thing behind CloudFlare to reduce your hosting costs, and improve access speeds for visitors around the world!
Good luck.
EDIT: response to comment:*
Do you mean that I should abandon django altogether ?
If the purpose is just to serve your exising HTML files to the public, without any requirement for authentication, editing of content by users through the frontend, or more advanced back-end functions, then yes Django is probably overkill for this task.
How is Jekyll different from Django ?
Django is a Python Web Framework, which allows you to build an interactive site on which users or staff can login, post articles, comment, etc. One of its key features is the ability to define database relationships trough 'Models' and then have all the admin-side forms generated automatically in the background. This means, with minimal work, you can instantly have the 'admin portal' side of the site live, which works great for use-cases like large blogs or news sites. You would then build the frontend, which can also be interactive. To launch this into production is a separate task which involves configuring multiple server components.
Jeykll on the other hand is much simpler, and basically gives you a way to create some template HTML files (avoiding the need to repeat code for stuff like navigation bars) and then with the jekyll build command outputs a _site directory which can be uploaded straight to a basic webserver. This is the crucial part, as you then only need a webserver which can serve static content, rather than requiring python, a database, application server like UWSGI, etc
Let's look at this example from the Jeyll Docs with your usecase in mind.
You could define a YML file with a list of all your charts:
docs_list_title: All Charts here.
docs:
- title: A Lovely Bokeh Chart.
url: bokeh_chart_1.html
- title: This Bokeh Chart is even Better
url: bokeh_chart_2.html
You mentioned previously that you already have the HTML files, so really what you've done here is made a list of those, which can be interpreted by the frontend.
The HTML template portion would look something like this:
<h2>{{ site.data.samplelist.docs_list_title }}</h2>
<ul>
{% for item in site.data.samplelist.docs %}
<li>{{ item.title }}</li>
{% endfor %}
</ul>
This would result in a list of links to all of your Charts, with the link text as the title.
Obviously you could then go further and add further info to the YML file, like beneath each url put publisher: someone which could then be accessed in the template's for loop as {{item.publisher}}
Can such tools like Jekyll, Django and Bootstrap be used together ?
Bootstrap can be used with Django or Jekyll, as it is a CSS library which controls how HTML is rendered in the user's browser. Check the documentation for more examples of its capability.
A good starting point may be to download a theme from somewhere like Start Bootstrap. Once you have that as a ZIP file, you can put it in your Jeykll project and attempt to have it render through the dev server with jekyll serve. You can then remove nav bar or header code to separate include files (see my earlier link to the Jeykll docs) and before you know it you'll be seeing progress.
The best way to learn is to just go ahead and try this!
I've been messing around with AWS lately and it definitely great. As a first test I'm trying to host the most basic static website via S3. The site is simply just one html file and a few javascript, css and image files.
Whenever I load the static URL the only thing that loads is the index.html file, its contents and for some strange reason the only image that loads is my avatar, yet all the images are stored in the same folder. All of the css, js and image files are also written as relative links too of course.
I've made sure all the files and folders permissions are set to "world" multiple times.
I also looked at the network tab in dev tools and its giving me 200's on every GET request.
I'm completely stumped as to why this is happening. Does anyone have an idea of what I'm missing?
The url is available at http://www.mikefisher.io.s3-website-us-east-1.amazonaws.com/
I should add that the site works perfectly locally as well as on a traditional web server.
I checked my browser console and it gives me this error which I think might have something to do with it.
Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream:
Fixed it!
The issue I was having is the metadata for the CSS files in Amazon S3 were set to 'binary/octet-stream' by default.
The way I fixed this was selecting the individual files in the bucket, clicking the properties tab, then in the meta-data section typing in 'text/css' as the value.
I'm using fossil to manage some home projects and keeping notes in the wiki. After running like this for a few months, I'd like to at least try to use embedded documentation; mainly so as to be able easily to go back to previous versions.
I've studied the website page about managing project documentation which confirms that this is a technique I want to follow up, but I can't make out how to do it.
I've cut-and-pasted one of my wiki pages and added it to my fossil repo, but I can't work out where it should go in the directory structure to be accessible as described on the above page.
I've tried in a few places none of which worked. The document is currently %fossil-root%\doc\foo.wiki, (I'm on Windows), where %fossil-root% is the directory holding _ _FOSSIL__ (slighly mangled filename because of markdown), but having started a server with fossil ui, when I point my browser at http://localhost:8080/doc/foo.wiki, fossil presents me with a nicely formatted page saying it can't find index.html. I created /doc/index.html to see what would happen, but it made no difference.
Please can someone help me out, and/or point me to an example repository containing embedded documentation or another "how-to" document.
If your document is located in %fossil-root%\doc\foo.wiki, you can access it at the following URL:
http://localhost:8080/doc/trunk/doc/foo.wiki
This URL breaks down as follows:
http://localhost:8080 is the root URL to access Fossil when you run fossil ui
/doc signals that you want to access embedded documentation
/trunk indicates the checkin containing the documentation you wish to access
/doc/foo.wiki is the path of the document inside the repository
Instead of trunk, you can also specify a tag, or a branch name, or even a hexadecimal checkin identifier.
In the URL you were using, http://localhost:8080/doc/foo.wiki, foo.wiki is interpreted as the checkin name, and no document path is specified, which logically means Fossil won't find anything.
As for an example repository containing embedded documentation, the homepage of the Fossil website itself is a prime example:
https://www.fossil-scm.org/index.html/doc/trunk/www/index.wiki
where
https://www.fossil-scm.org/index.html is Fossil's root URL
/doc indicates a request for embedded documentation
/trunk indicates we want to fetch files from the trunk
/www/ is the path to the requested file inside the repository
index.wiki is the name of the file inside the repository.
So, in the 'trunk' branch of the repository, the file www/index.wiki contains the home page of the Fossil website.
You simply need to put the documentation under the %fossil-root%\www\ directory (or any other directory under version control) in your repository and then you can, for example, add the following line to your header's mainmenu section to link to it:
html "<a href='$home/doc/trunk/www/foo.wiki'>Documentation</a>\n"
As I said, it can be any directory under version control. To test this, pick any file in the repository, let's say a README file at the top level, and go to http://localhost:8080/doc/trunk/README. You should see the README file load up in your browser in a raw text format. By putting wiki or html files under a particular directory such as www you make it easy to organize the files that you specifically want rendered as documentation, which makes it easier to link to them.
http://www.fossil-scm.org/index.html/doc/trunk/www/embeddeddoc.wiki
After fossil 1.33, just prepare your document in the repository.
If the wiki file is put in
/doc/index.wiki
And use web browser to setup -> Admin -> Configuration.
There is a "Index Page" field, fill in your main index.html.
For example:
/doc/trunk/doc/index.wiki
Or if you just want the released version:
/doc/<version>/doc/index.wiki