I'm making a simple website in GitHub pages. I have a text file in the /docs folder (I can move though) and I want to change it's content through index.html. I found a lot of back-end solutions but GitHub pages allows static webpages only. Is there a way to do so in static webpage and if so how to do it in javascript?
Since it's static pages, you can't rewrite the hosted file from the front end client. To update the text file contents, you'll need to do it through the github interface, or as a commit into your repository unfortunately
No.
Changing content on the server requires code that runs on the server.
If you could do it with client side code, then every website would rapidly become defaced.
The closest you could do would be to store data on the client (e.g. via localstorage) and then have a script on the page read that data and edit the DOM locally. Obviously, changing the data would change it only for the particular browser and not for all visitors.
There are two answers to your question:
Technically, it is possible to change files on GitHub from a script:
GitHub's API allows you to update files through an HTTP request.
You could use Javascript to modify the contents of a file, and then send a request to GitHub's API to update that file. There are a few libraries that make it really easy to work with the API, but from here you have to figure it out yourself.
Here is the documentation for this: https://developer.github.com/v3/repos/contents/#update-a-file
Conceptually, it sounds like you are doing something wrong. Static webpages are called static because nothing changes. If you want to have dynamic content, you should really look into other solutions.
Related
I am making a website that contains mainly static articles, and I wanted to just access .txt files from a directory and have the pages dynamically created that way when the site is loaded using JavaScript. However, I am struggling to find a way to get access to the files (The files would be in a folder wherever the site is being hosted along with the actual web pages and then I would be extracting the text from these files and creating the pages that way). Is this at all possible without having to use server side code or are there any recommendations for creating the pages another way? I would really like to avoid going through all of the trouble of continually adding html pages for every single article as that would be pretty monotonous and I currently don't have any back-end code and would like to keep it that way if possible. Any recommendations in general would be appreciated.
This is not possible without a backend server. Code running in browser is not allowed to access the files on the system due to security reasons.
Either write a simple backend service to fetch those text file or access those text file data by converting the text files as JavaScript files and declaring text data as variables. Then load these files before your main JavaScript file. Now you can access the data as variables in your main js script.
It is not possible in the traditional open file, read file and close file paradigm.
You could create a web service on your server that would return data from a file using ajax, such as the contents of the text file. But without any backend code, it will not be possible since there would be a lot of security implications if the client-side code was able to do so without any server-side code.
I understand that the web takes major security measures to prevent programs from accessing files on client computers. What I want to do is use AJAX or some other functionality to dynamically access file and folder names in my own public directory located in my Github repository to be served on my static Github page.
To give a little insight into the project I am working on I will give this example: say I want to easily add content to my blog and my directory looks like this:
- website (folder)
-- articles.html
-- articles (folder)
--- top-10-diys.txt
--- child-falls-in-well.txt
--- my-biography.txt
--- new-article.txt
When I add "new-article.txt" to the "articles" folder, I do not want to have to edit the corresponding "articles.html" page to add a link to the new article. I simply want AJAX or a similar functionality to get all the file names in the folder and generate links to my articles.
Is this possible? I simply want to create this functionality for my static Github page. Using AJAX is not a necessity, but I would like a pure Javascript or AJAX method.
EDIT:
I have come across two possible options to give me something like what I am looking for.
Option 1: request a directory on my server with AJAX, which will return a full HTML document with links to all the files in the directory.
Option 2: maintain a text file with all the file names in the directory and use AJAX to load all the files on the list.
However there are problems with both these methods. Option 1 requires me to parse out file names from the HTML document. This is not a clean solution, and depending on the server permissions, it may not work at all. I would rather not rely on this hack.
The problem with Option 2 is that it still requires me to hardcode file names into a text document, and so the solution isn't really dynamic. Sure, I'll save some time maintaining each individual link, but I will still have to maintain the text file. On top of that, this just seems like a sloppy solution.
EDIT AGAIN
I came across an option I didn't see before which is to use a Static Site Generator. The one used by Github is currently Jekyll. If I can't find any other way to get what I want on the fly, I may go with an SSG, but it's really not ideal for my purposes. I'm really just including this edit so people with my problem know their options.
I would create a separate Node server API with an endpoint (to be hit from your github pages front-end using AJAX) that fetches the files from that folder and sends them to your front end.
Develope using ASP.NET MVC
I have a website (Web Server) contains many pages and many static files (photo, css, ...).
Now I want to move these static files to another server (Resource Server).
[Reason: To Reduce the I/O loading on Web Server]
So, I need to process all the relative path in the pages
Then it can loading imgs(or other static files) from Resource Server after process
(e.g. <img src='/Content/Images/myPhoto.jpg' />)
p.s. Some imgs are generate dynamically by javascript.
and I don't want to use #Razor
Is there has any efficient or easily way to solve it.
(maybe like CDN's processing way but not use CDN service)
I had not process similar problem like it.
Hoping everybody can give me some suggestions. Thanks a lot!
You are describing a CDN or Content Management System. These are easy to combine with Razor, so I dont see any reason not to use existing methods to solve your problem.
There is a reasonable guide to doing this already on Stack Overflow. Best way to switch between static assets and CDN based assets for development and deployment
Did you search for ASP.net Razor CDN before posting the question ?
multi way to solve it :
1. you can create NetBIOS in server and chenge saved path for file with
the simple code and run it success
2. just change path file in database with query and page file path(img-src, etc)
3. use javascript to change path (replace currect path) in load page
(but this way is not optimal)
I want to download a webpage, say http://www.stackoverflow.com with nodejs. Meaning that I have an offline copy of the static page. It has to download the resources (like styles, javascript files, images etc) and update the references to local ones.
In any case I want an offline page that once opened looks exactly like the real page. Just like what happens when I choose file->save in a web browser.
Basically I want to replicate the function of
wget --page-requisites
(Although this does not download css and images properly)
The background is that I want to execute Javascript on an external website. This is (rightly) not possible due to cross-domain-policies. To avoid this, I just want to download the website and statically host it myself, execute my Javascript analysis-code and then delete it.
I'm sort of spit-balling on a solution that could work for this:
A package like js dom could be used to grab all the page's script, link, img, etc's source URLs. You could then GET and save each of those resources to your local environment and replace their src attributes with a new URL that points to your local copy. Then you could stringify the resulting HTML and save that as well. Then just serve the containing directory statically in Node.
Maybe just running wget --page-requisites from within node is the easiest solution?
I'll be interested to know what the final solution to this is. Hopefully something I said helps.
I want to upload a bunch of image files to a directory that I've set up on my ISP's free hosting service. It's something like http://home.ISPname.net/~username/subdir.
I want my Javascript code to be able to get a directory listing and then preload whatever it finds.
But getting such a thing even possible? My impression is not.
I suspect I will have to instead rename my files to 00000.jpg and upward, and attempt to detect what files are there using try.
FYI, I know that my ISP does not support using FTP protocol to get a directory listing.
Thanks for any help.
Under the assumption that your JavaScript code is code on your pages and not code on your server, then no, there's no API provided for JavaScript in a web browser other than a server-side API accessible via HTTP that you would create yourself. If the directory full of files is on the server, then it's going to have to be some server-side code that delivers the directory listing anyway. You could write such code in the server-side programming environment of your choice (including a server-side JavaScript solution, if that's what you want and if such a thing is possible at your ISP). As Pekka notes, it may be possible to simply enable directory browsing in your server, though that's generally a fairly low-level service that will deliver some sort of HTML page to you, and parsing through that might be somewhat painful (compared to what you could get from a tailor-made service).
Another, simpler thing you could do would be to upload a manifest file along with the other image files. In other words, create the directory listing in some easy-to-digest form, and maintain it separately as a simple file to be fetched.
javascript not suport directory listing in a direct way. but you can create a directory dumper php file, and send via AJAX.